javascript - JavaScript の onresize イベントが複数回発生する

Question

onresize イベントがトリガーされたときに関数を 1 回だけ実行しようとすると問題が発生します。この質問DOM onresize イベントを見てきましたが、jQuery を使用していないため、その関数がないと機能しません。助言がありますか？

Answer 1

サイズ変更イベントは、サイズ変更操作中にフレームごとに 1 回呼び出されます。リサイズ終了時に呼び出す場合は、コールバック関数でタイマーをセットするだけ。

var timeOut = null;

window.onresize = function(){
    if (timeOut != null)
        clearTimeout(timeOut);

    timeOut = setTimeout(function(){
        // YOUR RESIZE CODE HERE
    }, 500);
};

Answer 2

underscoredebounceの実装を使用できます。

  function debounce(func, wait, immediate) {
    var timeout;
    return function() {
      var context = this, args = arguments;
      var later = function() {
        timeout = null;
        if (!immediate) func.apply(context, args);
      };
      if (immediate && !timeout) func.apply(context, args);
      clearTimeout(timeout);
      timeout = setTimeout(later, wait);
    };
  }
  window.onresize = debounce(function() {
      // Your code here
  }, 500);

または、リンクされた質問のライブラリを使用してください。jQueryがなければ、Cowboy.debounce(...).