javascriptの

Question

私はこの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）。

私は自分のサイトにコメントを追加しましたが、モデレートされているため、まだ表示されない場合があります。

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

Answer 1

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

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

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

これはあなたには適していない可能性がありますが、もっと便利なロックを使用する方法はたくさんあります。

Answer 2

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

Answer 3

jQueryに組み込まれているので、何らかのonCompleteイベントを拡張モジュールにバインドして、呼び出されたときに実行される関数を渡すことはできませんか？

編集：ユーザがウィンドウのサイズを変更する起動すると、ウィンドウの大きさを監視する間隔を

設定。指定された時間内にディメンションが変更されていない場合は、ウィンドウのサイズ変更が完了したとみなすことができます。これで選択するjavascript関数は、setInterval（）であり、2つの引数を受け取ります。それぞれのtickを呼び出す関数と、各tickがどれくらいの時間（ミリ秒）かかります。

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

Answer 4

どのようにこのようないくつかのコードについて：ユーザーがサイズ変更を停止したときの機能だけリサイズすることを確認する必要があり

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

。

Answer 5

ポールアイルランドはこの問題を解決する素晴らしいDebounced jQuery pluginを持っています。

Answer 6

私は数日前にデフォルトのjQuery on -event-handlerを拡張しました。指定された間隔でイベントがトリガされなかった場合、選択された要素に1つまたは複数のイベントのイベントハンドラ関数をアタッチします。これは、resizeイベントなどの遅延の後にのみコールバックを開始する場合などに便利です。あなたがライブラリにある場合は

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

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

Answer 7

：あなたが最後のように追加のパラメータを渡すことができることを除いて 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 -eventハンドラのようにそれを使用しますあなたはアンダースコアをチェックアウトする必要があります。アンダースコアはすでにあなたの必要性を処理しています。ここ

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

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

にそのデバウンサ関数を呼び出します