jquery - リサイズイベントの前後

Question

要素のサイズ変更の前後に何かをしたいのですが、サイズ変更イベントをバインドしようとしましたが、うまくいきました：

$('#test_div').bind('resize', function(){
            // do something
});

いくつかの質問が見つかりましたが、解決策はです。timeout使用したくありませんtimeout。すぐに処理したいだけです:)

以下も参照してください。

提案をありがとう:)

score 10 · Accepted Answer

聞くことができるサイズ変更終了イベントのようなものはありません。ユーザーがいつサイズ変更を完了したかを知る唯一の方法は、サイズ変更イベントが発生しなくなるまでしばらく待つことです。setTimeout()これが、サイズ変更イベントが発生せずに一定期間が経過したことを知るための最良の方法であるため、ほとんどの場合、ソリューションに a の使用が含まれる理由です。

この私の以前の回答は.scroll()イベントをリッスンしますが、それは次とまったく同じ概念.resize()です: jquery で $(window).scroll functions を処理するより効率的な方法? 次のようにサイズ変更に同じ概念を使用できます。

var resizeTimer;
$(window).resize(function () {
    if (resizeTimer) {
        clearTimeout(resizeTimer);   // clear any previous pending timer
    }
     // set new timer
    resizeTimer = setTimeout(function() {
        resizeTimer = null;
        // put your resize logic here and it will only be called when 
        // there's been a pause in resize events
    }, 500);  
}

タイマーの値を試して500、好みを確認できます。数値が小さいほど、サイズ変更ハンドラーの呼び出しは速くなりますが、複数回呼び出される可能性があります。数値が大きいほど、発火前の一時停止が長くなりますが、同じユーザーアクション中に複数回発火する可能性は低くなります。

サイズ変更の前に何かをしたい場合は、取得した最初のサイズ変更イベントで関数を呼び出し、現在のサイズ変更操作中にその関数を再度呼び出さないようにする必要があります。

var resizeTimer;
$(window).resize(function () {
    if (resizeTimer) {
        clearTimeout(resizeTimer);   // clear any previous pending timer
    } else {
        // must be first resize event in a series
    }
     // set new timer
    resizeTimer = setTimeout(function() {
        resizeTimer = null;
        // put your resize logic here and it will only be called when 
        // there's been a pause in resize events
    }, 500);  
}

score 1 · Accepted Answer

smart resize jQuery プラグインを使用することもできますが、最終的にはsetTimeout().

繰り返しますが、サイズ変更が終了するのを待ちません...単に調整します。

jquery - リサイズイベントの前後

3 に答える 3

Related

Reference