21

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

http://andowebsit.es/blog/noteslog.com/post/how-to-fix-the-resize-event-in-ie (以前のリンクは noteslog.com/post/how-to-fix-the-resize でした) -イベント・イン・イエ）。

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

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

4

7 に答える 7

75

次のようなコードはどうでしょうか。

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
});

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

于 2009-03-20T22:06:33.363 に答える
9

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

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

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

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

于 2009-03-20T18:47:19.673 に答える
5

Paul Irishには、この問題を解決する優れたDebouncedjQueryプラグインがあります。

于 2011-06-16T16:33:18.397 に答える
2

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

以下は、アンダースコア デバウンサーがどのように機能するかの例です。

// 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/

于 2013-10-17T14:23:46.603 に答える
0

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

編集：

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

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

于 2009-03-20T18:52:14.250 に答える
0

数日前に、デフォルトの jQuery on-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または-event ハンドラーと同じように使用します。bind

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

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

于 2013-03-02T02:10:07.450 に答える