JavaScript의 디바운싱 및 제한에 대한 자세한 소개(코드 예)

이 글은 JavaScript의 디바운싱 및 스로틀링에 대한 자세한 소개(코드 예제)를 제공합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

인터뷰이든 브라우저 최적화에 대한 논의이든 디바운싱 및 제한 문제가 관련됩니다.
일반적으로 이 두 가지는 이벤트 트리거 빈도를 제한하는 방법입니다. 차이점은 제한은 이벤트가 트리거되는 시간 간격을 지정하고 디바운싱은 이벤트가 트리거되지 않는 시간 간격을 지정한다는 것입니다. 결과로 볼 때, 조절은 디바운스되는 동안 처리 시간의 민감도를 감소시키며, 트리거링 이벤트는 먼저 저장된 다음 지정된 이벤트 간격을 초과한 후 함께 전송됩니다.
점점 헷갈리게 만드니까 바로 코드로 가세요:
HTML

<input type="text" oninput="fatch()">

사용자가 검색할 수 있는 입력 태그가 있고, 입력 이벤트에 의해 실행되는 처리 기능 패치가 있습니다. . 이 패치는 요청 연관 단어의 값을 기반으로 백그라운드로 이동합니다.
위의 코드 아이디어에는 문제가 없지만 트리거 제한이 없으면 많은 수의 http 요청이 생성될 수 있으며 이러한 요청 중 상당수는 그다지 중요하지 않을 수 있으므로 아래 최적화를 위한 공간을 제공합니다. 이 문제를 해결하기 위해 조절을 사용하고 두 가지 아이디어를 디바운스합니다. (일반적으로 입력 상황에서는 디바운스를 사용합니다. 이는 단지 코드 설명의 편의를 위한 것입니다.)

Throttling

function jieliu (func, time){//func 执行函数， time 时间间隔
  let lastRun = null
  
  return function(){
    const now = new Date()
    if(now - lastRun > time){
      func(...arguments)
      lastRun = now
    }
  }
}


const listener = jieliu(function(value){//监听函数，指定间隔时间
  console.log(value)
}, 1000)

const input = document.querySelector("input")
//调用方法
input.addEventListener("input", function(event){
     listener(event.target.value)
})

위는 비교적 간단한 조절 구현이며 기본 호출 방법은 각 실행 lastRun을 저장하는 데 사용됩니다. 요청 빈도를 제한하는 요구 사항은 기본적으로 구현되지만 마지막 요청의 트리거는 무시됩니다.
개선 사항은 다음과 같습니다.

function jieliu (func, time){// 触发时间间隔>time 发送请求
  let lastRun = null
  let timeout = undefined
  return function(){
    const self = this; 
    const now = new Date()
    if(now - lastRun > time){
      if(timeout){
        clearTimeout(timeout)
        timeout = undefined
      }
      func.apply(self, arguments)
      lastRun = now
    }
    else{
      if(!timeout){
        timeout = setTimeout(func.apply(self, arguments), time)
      }
    }
  }
}

마지막 요청인지 확인하기 위해 시간 제한을 추가합니다.

Debounce

function qudou(func, time){
  let timeout = undefined
  
  return function(){
    const argu = arguments
    const self = this

    if(timeout){
      clearTimeout(timeout)
      timeout = undefined
    }else{
        timeout = setTimeout(func.apply(this, arguments), time)
    }
  }
}

위는 디바운스의 간단한 구현입니다. 마찬가지로 마지막 이벤트는 처리 기능을 트리거할 수 없습니다.

개선 사항은 다음과 같습니다.

function qudou(func, time){//判断连续time时间内不触发，发送func请求
  let timeout = undefined;
  let lastRun = null
  return function(){
    const self = this
    const now = new Date()
    if(now - lastRun > time){
      func.apply(self, arguments)
    }
    else {
      if(!timeout){
        timeout = setTimeout(func.apply(self, arguments), time)
      }
      else {
        clearTimeout(timeout)
        timeout = undefined
      }
    }
    lastRun = new Date()
  }
}

요약

글 전반에 걸쳐 쓰로틀링을 달성하는 주요 방법은 "지금"과 "lastRun" 간의 시간 차이를 비교하여 처리에 대한 호출 수를 줄이는 것입니다. 함수 및 흔들림 방지는 여전히 settimeout을 통해 처리 함수의 호출 타이밍을 지연한 다음 여러 트리거의 결과를 집계하고 처리 함수를 함께 호출하는 데 사용됩니다.

위 내용은 JavaScript의 디바운싱 및 제한에 대한 자세한 소개(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!