JS 기능 디바운싱 및 제한에 대한 자세한 분석(그래픽 튜토리얼)

이 글은 주로 JS 기능 디바운싱 및 스로틀링 관련 지식과 코드 분석에 대한 자세한 분석을 소개합니다.

이 글은 스로틀링 및 디바운싱의 기본 개념부터 시작하여 JS 기능에 대한 자세한 분석을 수행합니다.

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

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

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

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

2. JS 구현.

이전에 많은 이야기가 있었습니다. 인내심을 갖고 읽어주셔서 감사합니다. 스스로 조절 및 디바운스를 달성하는 방법을 살펴보겠습니다.

스로틀링:

/** 实现思路：
  ** 参数需要一个执行的频率，和一个对应的处理函数,
  ** 内部需要一个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('scroll', throttleRun)

이때 페이지를 미친듯이 스크롤하면 400ms 안에 123이 출력되는 것을 볼 수 있는데, 스로틀링이 없으면 계속해서 출력됩니다. . 대기 매개변수를 변경하여 다르게 느낄 수 있습니다.

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

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)
    }
   }
  }

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

디바운스:

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

debounce (func, wait) {
   let lastTime = null
   let timeout
   return function () {
    let context = this
    let now = new Date()
    // 判定不是一次抖动
    if (now - lastTime - wait > 0) {
     setTimeout(() => {
      func.apply(context, arguments)
     }, wait)
    } else {
     if (timeout) {
      clearTimeout(timeout)
      timeout = null
     }
     timeout = setTimeout(() => {
      func.apply(context, arguments)
     }, wait)
    }
    // 注意这里lastTime是上次的触发时间
    lastTime = now
   }
  }

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

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

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

방법 1

1 이 구현 방법의 아이디어는 이해하기 쉽습니다. 50밀리초와 같은 간격을 설정하고 사용합니다. 이번에는 기본으로 첫 번째 트리거 이벤트와 두 번째 트리거 이벤트 사이의 간격이 50밀리초 미만인 경우 타이머를 지우고 새 타이머를 설정하는 등의 작업을 한 후 50밀리초 이내에 반복되지 않을 때까지 계속합니다. 이벤트가 트리거됩니다. 코드는 다음과 같습니다:

function debounce(method){ 
 clearTimeout(method.timer); 
 method.timer=setTimeout(function(){ 
  method(); 
 },50); 
}

这种设计方式有一个问题：本来应该多次触发的事件，可能最终只会发生一次。具体来说，一个循序渐进的滚动事件，如果用户滚动太快速，或者程序设置的函数节流间隔时间太长，那么最终滚动事件会呈现为一个很突然的跳跃事件，中间过程都被节流截掉了。这个例子举的有点夸张了，不过使用这种方式进行节流最终是会明显感受到程序比不节流的时候“更突兀”，这对于用户体验是很差的。有一种弥补这种缺陷的设计思路。

方法二

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内加载jquery.js方法详解

JS同步、异步与延迟加载实现总结

위 내용은 JS 기능 디바운싱 및 제한에 대한 자세한 분석(그래픽 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!