ホームページ > ウェブフロントエンド > jsチュートリアル > setInterval を使用しない方がよい理由について話しましょう

setInterval を使用しない方がよい理由について話しましょう

青灯夜游
リリース: 2021-01-08 18:37:55
転載
4863 人が閲覧しました

setInterval を使用しない方がよい理由について話しましょう

なぜ setInterval を使用しないのでしょうか?次の記事では、setInterval を使用しない方がよい理由について簡単に説明します。一定の参考値があるので、困っている友達が参考になれば幸いです。

オンライン チャット ツールを開発する場合、一定のミリ秒後に操作を繰り返し実行する必要があることがよくあります。 「問題ありません。setInterval を使用するだけです。」と誰もが言いました。私はこの考えはひどいと思います。

理由の 1 つ: setInterval はコード エラーを無視します

setInterval には、呼び出したコードにエラーを報告する迷惑な習慣があります。つまり、setInterval で実行されるコードが何らかの理由で失敗した場合でも、それに関係なくそのコードを呼び出し続けます。コードを見てください

function a() {
    try{
        a.error.here;
    } catch(e){
        $(&#39;body&#39;).append(&#39;<div>&#39; + e.toString() + &#39;</div>&#39;);
        throw e;
    }
}
function b() {
    try{
        b.error.here;
    } catch(e)
    {
        $(&#39;body&#39;).append(&#39;<div>&#39; + e.toString() + &#39;</div>&#39;);
        throw e;
    }
    setTimeout(b, 2000);
}
setInterval(a, 2000);
setTimeout(b, 2000);
ログイン後にコピー

2 番目の理由: setInterval はネットワーク遅延を無視します

Ajax を介してサーバーを時々ポーリングすると仮定します。新しいデータがあるかどうかを参照してください (注: これを行う場合は、おそらく間違った方法を行っている可能性があります。「補償ポーリング」(バックオフ ポーリング) [1] を使用することをお勧めします)。また、何らかの理由 (サーバーの過負荷、ネットワークの一時的な停止、トラフィックの突然の増加、ユーザーの帯域幅の制限など) により、リクエストには思ったよりも長い時間がかかります。しかし、setInterval は気にしません。それでも定期的にリクエストが発行され、最終的にはクライアント ネットワーク キューが Ajax 呼び出しでいっぱいになります。コードを見てください

var n = 0,
    t = 0,
    u = 0,
    i, s = &#39;Stopping after 25 requests, to avoid killing jsfiddle’s server&#39;;
function a() {
    $.post(&#39;/ajax_html_echo/&#39;, function () {
        --n;
    });
    ++n;
    ++t;
    $(&#39;#reqs&#39;).html(n + &#39; a() requests in progress!&#39;);
    if (t > 25) {
        clearInterval(i);
        $(&#39;#reqs&#39;).html(s);
    }
}
function b() {
    ++u;
    $.post(&#39;/ajax_html_echo/&#39;, function () {
        $(&#39;#req2&#39;).html(&#39;b(): &#39; + new Date().toString());
        if (u <= 25) {
            setTimeout(b, 500);
        } else {
            $(&#39;#req2&#39;).html(s);
        }
    });
}
i = setInterval(a, 500);
setTimeout(b, 500);
ログイン後にコピー

3 番目の理由: setInterval は実行されることが保証されていません

setTimeout とは異なり、コードが実行されることは保証できません。時間間隔に達したときに正確に実行できます。呼び出した関数が完了するまでに時間がかかる場合、一部の呼び出しは単純に無視されます。コードを見てください

function slow() {
    $.ajax({
        url: &#39;/echo/html/&#39;,
        async: false,
        data: {
            delay: 1
        },
        complete: function () {
        }
    });
    $(&#39;#reqs&#39;).text(~~((new Date() - start) / 100) + &#39; expected, &#39; + iters + &#39; actual&#39;);
    if (iters++ > 4) {
        $(&#39;#reqs&#39;).append(&#39;<br>Stopping after 5 iterations&#39;);
        clearInterval(iv);
    }
};
var iv = setInterval(slow, 100), start = +new Date(), iters = 0;
ログイン後にコピー

解決策は簡単です。setTimeoutを使用します

setIntervalを使用する代わりに、関数自体を呼び出すことをお勧めします。適切な時点で setTimeout を実行します。前の 2 つの例では、setInterval を使用した関数 a はエラーになりますが、setTimeout を使用した関数 b は正常に実行されます。

間隔が等しくなければならない場合はどうすればよいでしょうか?

イベントが確実に「均等に」トリガーされるようにしたい場合は、希望する遅延から最後の通話にかかった時間を差し引き、その結果の差を動的に割り当てることができます。 setTimeout を遅延として設定します。ただし、JavaScript タイマーはあまり正確ではないことに注意してください [2]。そのため、さまざまな理由 (ガベージ コレクション、JavaScript がシングルスレッドであるなど) により、setInterval を使用したとしても、完全に「平均的な」レイテンシを取得することはできません。さらに、現在のブラウザでは、最小タイムアウト期間も 4 ミリ秒から 15 ミリ秒の間で修正されます。したがって、エラーがまったく発生しないことを期待しないでください。

プログラミング関連の知識について詳しくは、プログラミング教育をご覧ください。 !

以上がsetInterval を使用しない方がよい理由について話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:cnblogs.com
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート