js关于防抖和节流的问题

目录

一、防抖

1、防抖代码编写

2、添加一个是否立即执行的参数flag

3、防抖应用场景

 二、节流

1、节流函数编写

时间戳

定时器

时间戳 + 定时器。

2、节流场景

scroll 滚动

input 动态搜索

三、总结

四、防抖的库

防抖和节流的话题，无论是在面试还是在实际场景的应用过程中都，是一个出现频率很高的话题。本文就这两个话题，做一个全面的梳理。 

一、防抖

• 防抖: n 秒后在执行该事件，若在 n 秒内被重复触发，则重新计时

这句话的意思是：防抖就是要延迟执行，你一直操作触发事件一直不执行，当你停止操作等待多少秒后才执行。也就是说不管事件触发频率有多高，一定在事件触发 n 秒后执行。如果在事件触发的 n 秒又触发了这个事件，那就以新事件的事件为准，n 秒后才执行。总之，要等你触发完事件 n 秒内不再触发事件，它才执行。

1、防抖代码编写

根据定义，我们知道要在时间 n 秒后执行，那么我们就用定时器来实现：

function debounce(event, wait) {
    let timer = null;
    return function (...args) {
      clearTimeout(timer); // 清除setTimeout，使其回调函数不执行
        timer = setTimeout(() => {
            event.apply(this, args)
        }, wait)
    }
}

2、添加一个是否立即执行的参数flag

代码很简单，即当还在触发事件时，就清除 timer，使其在 n 秒后执行，但此写法首次不会立即执行，为其健壮性，需加上判断是否第一次执行的第三个参数 flag，判断其是否立即执行。

function debounce(event, wait, flag) {
    let timer = null;
    return function (...args) {
        clearTimeout(timer