기본적인 자바스크립트 기능인 디바운스, 폴링, 원스 인스턴스 사용법에 대한 자세한 설명

debounce

에너지 소비가 높은 이벤트의 경우 디바운스 기능이 좋은 솔루션입니다. 스크롤, 크기 조정 및 키* 이벤트에 디바운스 기능을 사용하지 않으면 거의 실수를 저지르는 것입니다. 다음 디바운스 함수는 코드를 효율적으로 유지할 수 있습니다.

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

위에서 디바운스 기능에 대해 언급했지만 이벤트가 존재하지 않으면 필수 상태를 결정하는 이벤트를 삽입할 수 없으므로 상태가 Require에 도달했는지 가끔씩 확인해야 합니다. .

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 이벤트와 마찬가지로 주어진 함수가 한 번만 발생하기를 원할 수도 있습니다. 아래 코드는 당신이 말하는 내용을 정확하게 제공합니다:

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 함수는 주어진 함수가 한 번만 호출될 수 있도록 보장하여 반복적인 초기화를 방지합니다!

위 내용은 기본적인 자바스크립트 기능인 디바운스, 폴링, 원스 인스턴스 사용법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!