基本的な JavaScript 関数 debounce、poll、once インスタンスの使用方法の詳細な説明

デバウンス

エネルギー消費の高いイベントの場合、デバウンス機能は優れたソリューションです。スクロール、サイズ変更、および key* イベントに対してデバウンス関数を使用しない場合は、ほとんど間違いを犯すことになります。次のデバウンス関数を使用すると、コードの効率を維持できます:

// 返回一个函数，如果它被不间断地调用，它将不会得到执行。该函数在停止调用 N 毫秒后，再次调用它才会得到执行。如果有传递 ‘immediate' 参数，会马上将函数安排到执行队列中，而不会延迟。
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);
    };
    var callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) func.apply(context, args);
  };
};
 
// 用法
var myEfficientFn = debounce(function() {
    
// 所有繁重的操作
}, 250);
window.addEventListener('resize', myEfficientFn);

デバウンス関数では、指定された時間内にコールバック関数を複数回実行することはできません。この関数は、頻繁にトリガーされるイベントにコールバック関数を割り当てる場合に特に重要です。

poll

デバウンス関数については上で説明しましたが、イベントが存在しない場合、イベントを挿入して必要な状態を判断することはできません。そのため、状態が要件に達しているかどうかを時々確認する必要があります。 。

function poll(fn, callback, errback, timeout, interval) {
  var endTime = Number(new Date()) + (timeout || 2000);
  interval = interval || 100;
 
  (function p() {
      
// 如果条件满足，则执行！
      if(fn()) {
        callback();
      }
      
// 如果条件不满足，但并未超时，再来一次
      else if (Number(new Date()) < endTime) {
        setTimeout(p, interval);
      }
      
// 不匹配且时间消耗过长，则拒绝！
      else {
        errback(new Error(&#39;timed out for &#39; + fn + &#39;: &#39; + arguments));
      }
  })();
}
 
// 用法：确保元素可见
poll(
  function() {
    return document.getElementById(&#39;lightbox&#39;).offsetWidth > 0;
  },
  function() {
    
// 执行，成功的回调函数
  },
  function() {
    
// 错误，失败的回调函数
  }
);

ポーリングはウェブで長い間使用されており、今後も使用されるでしょう。

once

onload イベントと同様に、特定の関数を 1 回だけ実行したい場合があります。以下のコードは、あなたが話していることを正確に示しています:

function once(fn, context) { 
  var result;
 
  return function() { 
    if(fn) {
      result = fn.apply(context || this, arguments);
      fn = null;
    }
 
    return result;
  };
}
 
// 用法
var canOnlyFireOnce = once(function() {
  console.log('Fired!');
});
 
canOnlyFireOnce(); 
// "Fired!"
canOnlyFireOnce(); 
// nada 
          
// 没有执行指定函数

once 関数は、指定された関数が 1 回だけ呼び出せることを保証し、初期化の繰り返しを防ぎます。

以上が基本的な JavaScript 関数 debounce、poll、once インスタンスの使用方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。