简单实现debouce与throttle

一、debounce（去抖）

设定一个延迟时间，假如两次触发时间间隔小于延时时间，那么那段时间内的所有触发都不会执行，直到两次触发时间间隔大于设置的延迟时间。时间间隔每次都会从0重新开始计时。
思路：设置一个定时器，倒计时即延迟时间，每次调用清除上一个定时器，小于延迟时间的调用被取消，大于延迟时间的调用正常执行。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
//去抖
debounce = (delay, fn) => {
  let timer;
  return function () {
    clearTimeout(timer);
    timer = setTimeout(fn, delay);
  }
}
 
 
//延时500ms，结果打印'debounce'
let debounceFN = this.debounce(500, () => console.log('debounce'));
 
//300ms触发一次，总时长1500ms
let i = 0;
let timer = setInterval(() => {
    debounceFN()
    i++;
    if (i === 5) {
      clearInterval(timer);
    }
  }, 300);
 
 
//结果：只执行了最后一个调用，打印了一个'debounce'

二、throttle（节流）

设定一个延迟时间，从第一次调用开始计时，每当两次调用的时间间隔等于延迟时间时，执行一次调用，时间间隔内的触发就被取消。
思路：设定一个时间值，记录最新执行的时间，每当触发时，比较当前时间与上一次执行的时间间隔是否大于设定的时间值，如果大于就执行方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
//节流
 throttle = (interval, fn) => {
   let last = 0;
   return function () {
     var cur = +new Date();
     if (cur - last > interval) {
       fn()
       last = cur;
     }
   }
 }
 
 
 //时间值500ms，结果打印'throttle'
 let throttleFN = this.throttle(500, () => { console.log('throttle')})
 
 
 //300ms触发一次，总时长1500ms
 let i = 0;
 let timer = setInterval(() => {
   throttleFN()
   i++;
   if (i === 5) {
     clearInterval(timer);
   }
 }, 300);
 
 
 //结果：执行了3次fn，打印了3个'debounce'