【总结】：JavaScript面试必考优化题 —— 防抖节流 - 应用场景

---

一、防抖

触发高频事件后n秒内只执行一次，如果n秒内再次触发就会重新计算时间。

防抖的设计思路：

1. 触发事件
2. 清除定时
3. 设置定时

如果在规定时间内仍然有请求/事件的操作，会清除定时，重设置定时
如果在规定时间内没有请求/事件，就可以执行提交或者下面的操作了

代码实现

let btn = document.querySelector('button')

function payMoney() {
    
    
    console.log('已剁');
}

function debounce(payMoney, delay) {
    
    
    let timer  //1. 防止多次创建timer 2.(第二次点击时，由于闭包的原因 第一次的timer会存在)
    return function () {
    
    
        let context = this //保存button的this
        let args = arguments //参数
        clearTimeout(timer)
        timer = setTimeout(() => {
    
    
            payMoney.apply(context, args) //调用函数，修改this指向为context(button),添加参数
        }, delay);
    }
}

btn.addEventListener('click',debounce(payMoney,2000))

二、节流

高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率。

节流的设计思路：

1. 触发事件
2. 判断：触发事件是否在时间间隔内？ 是：不触发；不是：触发
3. 设置定时

如果在规定时间内仍然有请求/事件的操作，会需要本次请求/事件操作，等待第一次的事件触发。

代码实现

function coloring() {
    
    
	let r = Math.floor(Math.random() * 255)
	let g = Math.floor(Math.random() * 255)
	let b = Math.floor(Math.random() * 255)
	document.body.style.background = `rgb(${
      
      r},${
      
      g},${
      
      b})`
}

function throttle(coloring,delay) {
    
    
    let timer
    return function() {
    
    
        let contxt = this
        let args = arguments

        //判断：如果有timer，说明上一个时间还未结束
        if(timer) {
    
    
            return  //没结束你就return停止，等上一个结束
        }
        timer = setTimeout(() => {
    
    
            coloring.apply(contxt,args)
            timer = null  //timer不在事件完成之后给null的话，上面的if会一直判断为真
        }, delay);
    }
}

window.addEventListener('resize',throttle(coloring,2000))

三、总结

防抖：将多次操作合并为一次操作进行。原理是维护一个计时器，规定在delay时间后触发函数，但是在delay时间内再次触发的话，就会取消之前的计时器而重新设置。这样一来，只有最后一次操作能被触发。

节流：使得一定时间内只触发一次函数。原理是通过判断是否有延迟调用函数未执行。

区别

函数节流不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数，而函数防抖只是在最后一次事件后才触发一次函数。
比如：在页面的无限加载场景下，我们需要用户在滚动页面时，每隔一段时间发一次 Ajax 请求，而不是在用户停下滚动页面操作时才去请求数据。这样的场景，就适合用节流技术来实现。