web-dev-qa-db-ja.com

サイズ変更ハンドルをドラッグしているときにJavaScriptのサイズ変更イベントが複数回発生する

このjQueryプラグインが機能することを期待していましたが、機能しませんでした。

http://andowebsit.es/blog/noteslog.com/post/how-to-fix-the-resize-event-in-ie （古いリンクはnoteslog.com/post/how-でしたto-fix-the-resize-event-in-ie）。

彼のサイトにコメントを追加しましたが、モデレートされているため、まだ表示されていない可能性があります。

とにかく、私の願いを説明させてください。ユーザーがサイズ変更を一時停止したとき、またはサイズ変更を完了したときに、whileではなく、「サイズ変更」タイプのイベントを発生させたい。ブラウザのウィンドウサイズ変更ハンドルをアクティブにドラッグします。実行する必要があるかなり複雑で時間のかかるOnResizeHandled関数がありますが、ユーザーがウィンドウを100ピクセル拡大し、イベントが1ピクセルの動きで発生したという理由だけで、100回実行することはできません。ユーザーがサイズ変更を完了したら、それを処理するのが最善の策だと思います。

jqueryjavascript-eventswindowresize
21
DMCS

並行性ソリューションからいくつかのアイデアを借りて、ブラウザーからの大量のイベントを管理します。

たとえば、サイズ変更イベントを最初に取得したときに、ユーザーが現在サイズ変更中であることを示すフラグをtrueに設定します。 1秒後に実際のサイズ変更イベントハンドラーを呼び出すようにタイムアウトを設定します。次に、このフラグがtrueの場合は常に、サイズ変更イベントを無視します。次に、実際のハンドラーで、すべてが完了して修正されたら、フラグをfalseに戻します。

そうすれば、最新のイベントを1秒に1回（または要件に応じて他の期間）だけ処理できます。サイズ変更の途中でユーザーが一時停止すると、処理されます。ユーザーが終了すると、処理されます。

これはあなたには適していないかもしれませんが、もっと役立つかもしれないロックを使用する他の多くの方法があります。

9
Welbog

このようなコードはどうですか？

function resizeStuff() {
 //Time consuming resize stuff here
}
var TO = false;
$(window).resize(function(){
 if(TO !== false)
    clearTimeout(TO);
 TO = setTimeout(resizeStuff, 200); //200 is time in miliseconds
});

これにより、ユーザーがサイズ変更を停止したときにのみ関数のサイズが変更されるようになります。

75
Pim Jager

Paul Irishには、この問題を解決する素晴らしい Debounced jQueryプラグイン があります。

5
James

ライブラリに興味がある場合は、アンダースコアをチェックアウトする必要があります。アンダースコアはすでにニーズを処理しており、プロジェクトにはおそらくさらに多くのものがあります。

アンダースコアデバウンサーがどのように機能するかの例を次に示します。

// declare Listener function
var debouncerListener = _.debounce( function(e) {

    // all the actions you need to happen when this event fires

}, 300 ); // the amount of milliseconds that you want to wait before this function is called again

次に、ウィンドウのサイズ変更時にそのデバウンサー関数を呼び出すだけです

window.addEventListener("resize", debouncerListener, false);

ここで利用可能なすべてのアンダースコア関数をチェックアウトしてください http://underscorejs.org/

2
JrBriones

ユーザーがサイズ変更を一時停止するときのタイムアウトを設定するのはどうですか？サイズ変更が発生したときにタイムアウトをリセットするか、タイムアウトの期限が切れた場合はサイズ変更イベントハンドラーを起動します。

1
Russ Cam

JQueryに組み込まれているので、ある種のonCompleteイベントを拡張機能にバインドして、呼び出されたときに実行する必要のある関数を渡すことはできませんか？

編集：

ユーザーがウィンドウのサイズ変更を開始したら、ウィンドウのサイズを監視する間隔を設定します。仕様の事前設定された期間内に寸法が変更されていない場合は、ウィンドウのサイズ変更が「完了」したと見なすことができます。この中で選択するjavascript関数はsetInterval（）で、これは2つの引数を受け入れます。各ティックを呼び出す関数と、各ティックにかかる時間（ミリ秒単位）です。

それをjqueryフレームワーク内で具体的に記述する方法については、jqueryについて十分に理解していないのでそれを伝えることができません。おそらく他の誰かがあなたをより具体的に助けることができますが、同時に、私が今説明したように機能するonCompleteイベントですでにリンクしたjquery拡張機能を拡張することを検討するかもしれません。

0
Rahul

数日前にデフォルトのjQueryon- event-handlerを拡張しました。イベントが特定の間隔でトリガーされなかった場合、選択した要素に1つ以上のイベントのイベントハンドラー関数をアタッチします。これは、サイズ変更イベントなど、遅延後にのみコールバックを起動する場合に役立ちます。 https://github.com/yckart/jquery.unevent.js

;(function ($) {
    var methods = { on: $.fn.on, bind: $.fn.bind };
    $.each(methods, function(k){
        $.fn[k] = function () {
            var args = [].slice.call(arguments),
                delay = args.pop(),
                fn = args.pop(),
                timer;

            args.Push(function () {
                var self = this,
                    arg = arguments;
                clearTimeout(timer);
                timer = setTimeout(function(){
                    fn.apply(self, [].slice.call(arg));
                }, delay);
            });

            return methods[k].apply(this, isNaN(delay) ? arguments : args);
        };
    });
}(jQuery));

他のonまたはbind-イベントハンドラーと同じように使用しますが、最後に追加のパラメーターを渡すことができます。

$(window).on('resize', function(e) {
    console.log(e.type + '-event was 200ms not triggered');
}, 200);

http://jsfiddle.net/ARTsinn/EqqHx/

0
yckart