Detaillierte Erläuterung der Verwendung der grundlegenden JavaScript-Funktionen Debounce, Poll und Once-Instanzen

Entprellung

Für Ereignisse mit hohem Energieverbrauch ist die Entprellungsfunktion eine gute Lösung. Wenn Sie die Entprellungsfunktion nicht für Scroll-, Größenänderungs- und Tastenereignisse* verwenden, dann machen Sie fast einen Fehler. Die folgende Entprellungsfunktion kann Ihren Code effizient halten:

// 返回一个函数，如果它被不间断地调用，它将不会得到执行。该函数在停止调用 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);

Die Entprellungsfunktion lässt nicht zu, dass die Rückruffunktion mehr als einmal innerhalb einer bestimmten Zeit ausgeführt wird. Diese Funktion ist besonders wichtig, wenn Sie einem Ereignis, das häufig ausgelöst wird, eine Rückruffunktion zuweisen.

Umfrage

Obwohl die Entprellungsfunktion oben erwähnt wurde, können Sie kein Ereignis einfügen, um den erforderlichen Status zu ermitteln, wenn das Ereignis nicht vorhanden ist um von Zeit zu Zeit zu prüfen, ob der Status Ihren Anforderungen entspricht.

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() {
    
// 错误，失败的回调函数
  }
);

Umfragen werden im Web schon seit langem eingesetzt und werden auch in Zukunft noch genutzt.

einmal

Manchmal möchten Sie, dass eine bestimmte Funktion nur einmal auftritt, ähnlich dem Onload-Ereignis. Der folgende Code stellt die Funktionalität bereit, von der Sie sprechen:

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-Funktion stellt sicher, dass eine bestimmte Funktion nur einmal aufgerufen werden kann, und verhindert so eine wiederholte Initialisierung!

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung der grundlegenden JavaScript-Funktionen Debounce, Poll und Once-Instanzen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!