집 > 기사 > 웹 프론트엔드 > JS 기능 제한 및 흔들림 방지 예제에 대한 자세한 설명

JS 기능 제한 및 흔들림 방지 예제에 대한 자세한 설명

小云云원래의: 2018-01-09 15:08:362213검색

이 기사에서는 주로 JS 기능 조절 및 손떨림 방지 기능을 소개합니다. 관심 있는 분들이 이에 대해 자세히 알아볼 수 있기를 바랍니다.

프런트 엔드 개발에서는 일부 사용자 동작으로 인해 이벤트 실행이 자주 발생하며 DOM 작업 및 리소스 로드와 같이 성능을 많이 소모하는 처리로 인해 인터페이스가 정지되거나 심지어 브라우저 충돌이 발생할 수도 있습니다. 비슷한 요구 사항을 해결하기 위해 함수 조절(throttle)과 함수 디바운스(debounce)가 등장했습니다.

함수 조절(throttle)

함수 조절은 실행 주기보다 크거나 같은 경우에만 함수가 실행되도록 예약하고, 주기 내의 호출은 실행되지 않도록 예약하는 것입니다. 그것은 마치 물 한 방울이 일정한 무게로 쌓인 후에 떨어지는 것과 같습니다.

시나리오:

창 크기 조정(크기 조정)
페이지 스크롤(스크롤)
미친 클릭 구매(마우스 다운)

구현:

function throttle(method, delay){
  var last = 0;
  return function (){
    var now = +new Date();
    if(now - last > delay){
      method.apply(this,arguments);
      last = now;
    }
  }
}

document.getElementById(&#39;throttle&#39;).onclick = throttle(function(){console.log(&#39;click&#39;)},2000);

밑줄 구현:

_.throttle = function(func, wait, options) {
  var context, args, result;
  var timeout = null;
  var previous = 0;
  if (!options) options = {};
  var later = function() {
    previous = options.leading === false ? 0 : _.now();
    timeout = null;
    result = func.apply(context, args);
    if (!timeout) context = args = null;
  };
  return function() {
    var now = _.now();
    if (!previous && options.leading === false) previous = now;
    //计算剩余时间
    var remaining = wait - (now - previous);
    context = this;
    args = arguments;
    //剩余时间小于等于0或者剩余时间大于等待时间(本地时间变动出现)
    if (remaining <= 0 || remaining > wait) {
      if (timeout) {
        clearTimeout(timeout);
        timeout = null;
      }
      previous = now;
      result = func.apply(context, args);
      if (!timeout) context = args = null;
    } else if (!timeout && options.trailing !== false) {
      timeout = setTimeout(later, remaining);
    }
    return result;
  };
};

함수 디바운스(debounce)

함수 디바운스는 함수가 자주 실행되어야 할 때 여유 시간이 충분할 때 한 번만 실행된다는 의미입니다. 버스 운전사는 버스에서 내리기 전에 모든 사람이 버스에 탈 때까지 기다리는 것 같습니다.

시나리오:

실시간 검색(키업)
드래그 앤 드롭(마우스 이동)

구현:

function debounce(method, delay){
  var timer = null;
  return function(){
    var context = this,args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function(){
      method.apply(context, args);
    },delay);
  }
}

document.getElementById(&#39;debounce&#39;).onclick = debounce(function(){console.log(&#39;click&#39;)},2000);

underscore 구현:

_.debounce = function(func, wait, immediate) {
  var timeout, args, context, timestamp, result;
  var later = function() {
    var last = _.now() - timestamp;
    if (last < wait && last >= 0) {
      timeout = setTimeout(later, wait - last);
    } else {
      timeout = null;
      if (!immediate) {
        result = func.apply(context, args);
        if (!timeout) context = args = null;
      }
    }
  };
  return function() {
    context = this;
    args = arguments;
    timestamp = _.now();
    var callNow = immediate && !timeout;
    if (!timeout) timeout = setTimeout(later, wait);
    if (callNow) {
      result = func.apply(context, args);
      context = args = null;
    }
    return result;
  };
};

기능 조절 및 기능 디바운스는 논리 연산을 지연시켜 성능을 향상시키는 방법으로 프런트 엔드 최적화에서 일반적이고 중요한 솔루션입니다. 개념과 실제 적용을 통해 둘 사이의 차이점을 이해하고 필요에 따라 적절한 방법을 선택할 수 있습니다.

JS 기능 제한 및 흔들림 방지 예제에 대한 자세한 설명

관련 기사