javascript - ウィンドウのサイズ変更後に関数を起動する

Question

でいくつかの機能を実行してい$(window).resize()ます。その中の関数の 1 つは、多数の div を含む複雑なアニメーションです。

$window.resize(function() {
    // some functions
    doAnim();
}

ここでの問題は、resize()関数が頻繁にトリガーされることです。終了後に 1 つの関数をresize()起動して、100 回起動しないことは可能ですか?

乾杯

Answer 1

したがって、これはユーザーが何かを「入力」する場合と同様のシナリオだと思います。ユーザーがいつ文を書き終えたかはわかりません。ここでも同じです。ユーザーがいつサイズ変更を終えたかはわかりません。あなたができることは、許容可能な間隔を持つことです：

var idt;
$(window).resize(function() {
    if (idt) clearTimeout(idt);
    idt = setTimeout(doAnim, 500);
}

idtまた、変数でグローバル スコープを汚染することを避けるために、クロージャを使用することもできます。

ただし、ここでの主なポイントは、ユーザーがウィンドウのサイズを変更するたびにタイムアウトを設定し、前のタイムアウトをクリアするdoAnimことです。関数は、ユーザーがウィンドウのサイズを変更せずに0.5秒間ウィンドウを離れた場合にのみ実行されます。もちろん、独自の遅延を設定できます。

Answer 2

以下に示すように、それを達成できます。これは、サイズ変更が終了したときに呼び出されます:

        var myTimer;
        $(window).resize(function() 
        {
            // some functions
            var interval = 500;
            clearInterval(myTimer);
            myTimer = setInterval(function () { doAnim(); }, interval);
        });

        function doAnim() 
        {
            clearInterval(myTimer);
            alert('Resized');
        }