집 > 기사 > 웹 프론트엔드 > JS 기능 디바운싱 및 제한에 대한 자세한 분석

JS 기능 디바운싱 및 제한에 대한 자세한 분석

小云云원래의: 2017-12-06 09:49:581193검색

1. 스로틀링 및 디바운싱이란 무엇입니까?

절약. 수도꼭지를 조이면 물의 흐름이 줄어들지만, 물의 흐름이 멈추는 것은 아닙니다. 실생활에서 때때로 물통을 가져와야 할 때가 있다고 상상해 보십시오. 물을 길어오는 동안 우리는 다른 일을 하기 위해 잠시 자리를 비워야 할 수도 있습니다. 물이 물통을 거의 채울 수 있도록 다시 돌아올 때 수도꼭지를 너무 높게 열 수 없습니다. 그렇지 않으면 돌아오기 전에 물이 가득 차서 이때 많은 물이 낭비됩니다. 돌아올 때 물이 거의 가득 차도록 속도를 줄여야 합니다. 그렇다면 JS에 그런 상황이 있습니까? 일반적인 시나리오는 이미지의 지연 로딩과 페이지의 스크롤 이벤트 또는 마우스의 mousemove 이벤트를 모니터링하는 것입니다. mousemove는 마우스가 움직일 때 사용됩니다. 브라우저에 의해 자주 실행되므로 해당 이벤트가 자주 실행되어(물 흐름이 너무 빠름) 브라우저 리소스 오버헤드가 많이 발생하고 많은 문제가 발생합니다. 중간 처리가 필요하지 않습니다. 이때 브라우저가 정지됩니다. 어떻게 조절해야 합니까? 브라우저가 해당 이벤트를 트리거하는 것을 막을 수는 없지만 이벤트 처리 방법의 실행 빈도를 줄여 해당 처리 오버헤드를 줄일 수 있습니다.

흔들림을 제거하세요. 나는 아마도 고등학교 물리학에서 이 용어를 처음 접했을 것입니다. 때때로 스위치가 실제로 닫히기 전에 떨릴 수 있습니다. 지터가 분명하다면 전구가 깜박이는 것은 중요하지 않습니다. .. 이때 다시 눈이 손상되면 문제가 발생합니다. 우리 페이지에서는 입력 상자 중 하나가 콘텐츠를 입력하는 동안 백그라운드에서 해당 관련 단어를 쿼리할 수 있다고 가정합니다. 요청이 발생하면 사용자 입력이 완료될 때까지 이전 요청이 중복되어야 합니다. 네트워크 속도가 느리고 백그라운드에서 반환되는 데이터가 더 느리다고 가정하면 마지막 요청이 반환될 때까지 표시되는 관련 단어가 자주 변경될 수 있습니다. 이때 일정 시간 내에 다시 입력할지 여부를 모니터링할 수 있으며, 다시 입력이 없으면 입력이 완료된 것으로 간주하고 요청을 전송하는 것으로 판단합니다. 아직 입력 중이므로 요청이 전송되지 않습니다.

디바운스와 스로틀링은 다릅니다. 스로틀링은 중간 처리 기능을 제한하지만 빈도만 줄이는 반면, 디바운스는 모든 중간 처리 기능을 필터링하고 지정된 시간 내에만 작업을 실행합니다.

2. JS 구현. ㅋㅋㅋ 조절이 없으면 계속 인쇄됩니다. 대기 매개변수를 변경하여 차이를 느낄 수 있습니다.

그러나 여기서 우리의 방법은 이벤트가 발생할 때 this 객체를 얻지 못하고 이 트리거의 시간과 마지막 실행 간격의 시간을 판단하여 결정하는 방법이 간단하고 조잡하기 때문에 제한 방법이 불완전합니다. 콜백을 실행하는지 여부에 따라 마지막 트리거가 실행되지 않거나 사용자의 출발 간격이 실제로 매우 짧아 실행될 수 없어 살인 사건이 발생하므로 방법을 개선해야 합니다.

/** 实现思路：
  ** 参数需要一个执行的频率，和一个对应的处理函数,
  ** 内部需要一个lastTime 变量记录上一次执行的时间
  **/
  function throttle (func, wait) {
   let lastTime = null　　　　// 为了避免每次调用lastTime都被清空，利用js的闭包返回一个function确保不生命全局变量也可以
   return function () {
    let now = new Date()
    // 如果上次执行的时间和这次触发的时间大于一个执行周期，则执行
    if (now - lastTime - wait > 0) {
     func()
     lastTime = now
    }
   }
  }

이렇게 하면 우리의 방법이 비교적 완성되었으며 호출 방법은 이전과 동일합니다.

디바운스:

디바운스 방법은 조절과 일치하지만, 이 방법은 지터가 끝난 것으로 판단된 후에만 실행됩니다.

// 由于闭包的存在，调用会不一样
let throttleRun = throttle(() => {
  console.log(123)
}, 400)
window.addEventListener(&#39;scroll&#39;, throttleRun)

이때는 이전과 동일하게 호출하면 아무리 창을 스크롤해도 스크롤을 멈출 때만 해당 이벤트가 실행된다는 것을 알 수 있습니다.

디바운스 및 제한은 많은 성숙한 js에서 구현되었으며 일반적인 아이디어는 기본적으로 다음과 같습니다.

네티즌의 구현 방법 코드를 공유해 보겠습니다.

방법 1

1 이 구현 방법의 아이디어는 이해하기 쉽습니다. 간격을 50으로 설정합니다. 밀리초, ~ 이 시간은 첫 번째 트리거 이벤트와 두 번째 트리거 이벤트 사이의 간격이 50밀리초 미만인 경우 이 타이머를 지우고 새 타이머를 설정하는 방식으로 50밀리초가 될 때까지 타이머를 설정하는 기준으로 사용됩니다. 이벤트가 트리거된 후 밀리초 이내에는 다시 트리거되지 않습니다. 코드는 다음과 같습니다.

function throttle (func, wait) {
   let lastTime = null
   let timeout
   return function () {
    let context = this
    let now = new Date()
    // 如果上次执行的时间和这次触发的时间大于一个执行周期，则执行
    if (now - lastTime - wait > 0) {
     // 如果之前有了定时任务则清除
     if (timeout) {
      clearTimeout(timeout)
      timeout = null
     }
     func.apply(context, arguments)
     lastTime = now
    } else if (!timeout) {
     timeout = setTimeout(() => {
      // 改变执行上下文环境
      func.apply(context, arguments)
     }, wait)
    }
   }
  }

이 설계 방법에는 문제가 있습니다. 여러 번 실행되어야 하는 이벤트가 한 번만 발생할 수 있다는 것입니다. 구체적으로, 점진적인 스크롤링 이벤트의 경우 사용자가 너무 빠르게 스크롤하거나 프로그램에서 설정한 기능 조절 간격이 너무 길면 최종 스크롤링 이벤트가 갑작스러운 점프 이벤트로 나타나며 조절로 인해 중간 프로세스가 중단됩니다. . 이 예는 약간 과장되었지만 이 방법을 사용하여 조절하면 결국 프로그램이 조절되지 않았을 때보다 "더 갑작스럽다"는 느낌을 받게 되며 이는 사용자 경험에 매우 좋지 않습니다. 이런 단점을 보완할 수 있는 디자인 아이디어가 있습니다.

방법 2

2.第二种实现方式的思路与第一种稍有差别：设置一个间隔时间，比如50毫秒，以此时间为基准稳定分隔事件触发情况，也就是说100毫秒内连续触发多次事件，也只会按照50毫秒一次稳定分隔执行。代码如下：

var oldTime=new Date().getTime(); 
var delay=50; 
function throttle1(method){ 
 var curTime=new Date().getTime(); 
 if(curTime-oldTime>=delay){ 
  oldTime=curTime; 
  method(); 
 } 
}

相比于第一种方法，第二种方法也许会比第一种方法执行更多次（有时候意味着更多次请求后台，即更多的流量），但是却很好的解决了第一种方法清除中间过程的缺陷。因此在具体场景应根据情况择优决定使用哪种方法。

对于方法二，我们再提供另一种同样功能的写法：

var timer=undefined,delay=50; 
function throttle2(method){ 
 if(timer){ 
  return ; 
 } 
 method(); 
 timer=setTimeout(function(){ 
  timer=undefined; 
 },delay); 
}

以上内容就是JS函数去抖和节流详解，希望能帮助到大家。

JS 기능 디바운싱 및 제한에 대한 자세한 분석

관련 기사