防抖和节流（详解） 使用场景和区别-ag真人游戏

一、防抖 （多次触发 只执行最后一次）

防抖策略（debounce）是当事件被触发后，延迟n秒后再执行回调，如果在这n秒内事件又被触发，则重新计时。

作用： 高频率触发的事件，在指定的单位时间内，只响应最后一次，如果在指定的时间内再次触发，则重新计算时间。

1. 防抖的应用场景

• 登录、发短信等按钮避免用户点击太快，以致于发送了多次请求，需要防抖
• 调整浏览器窗口大小时，resize 次数过于频繁，造成计算过多，此时需要一次到位，就用到了防抖
• 文本编辑器实时保存，当无任何更改操作一秒后进行保存

2. 防抖的实现思路

实现代码：

    // 防抖函数
    function debounce(fn, wait) {
  
        let timer;
        return function() {
  
            let _this = this;
            let args = arguments;
            if(timer) {
   cleartimeout(timer) }
            timer = settimeout(function(){
  
                fn.apply(_this, args)
            }, wait);      
        }
    }
    // 使用
    window.onresize = debounce(function() {
  console.log('resize')}, 500)

应用示例：

节流策略（throttle），控制事件发生的频率，如控制为1s发生一次，甚至1分钟发生一次。与服务端(server)及网关(gateway)控制的限流 (rate limit) 类似。

作用： 高频率触发的事件,在指定的单位时间内，只响应第一次。

1. 节流的应用场景

• 鼠标连续不断地触发某事件（如点击），单位时间内只触发一次；
• 监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断。例如：懒加载；
• 浏览器播放事件，每个一秒计算一次进度信息等

2. 节流的实现思路

实现代码：

    // 方式1: 使用时间戳
    function throttle1(fn, wait) {
  
        let time = 0;
        return function() {
  
            let _this = this;
            let args = arguments;
            let now = date.now()
            if(now - time > wait) {
  
                fn.apply(_this, args);
                time = now;
            }
        }
    }
    
    // 方式2: 使用定时器
    function thorttle2(fn, wait) {
  
        let timer;
        return function () {
  
            let _this = this;
            let args = arguments;
            
            if(!timer) {
  
                timer = settimeout(function(){
  
                    timer = null;
                    fn.apply(_this, args)
                }, wait)
            }
        }
    }

应用示例：

• 防抖：防止抖动，单位时间内事件触发会被重置，避免事件被误伤触发多次。代码实现重在清零 cleartimeout。防抖可以比作等电梯，只要有一个人进来，就需要再等一会儿。业务场景有避免登录按钮多次点击的重复提交。
• 节流：控制流量，单位时间内事件只能触发一次，与服务器端的限流 (rate limit) 类似。代码实现重在开锁关锁 timer=timeout; timer=null。节流可以比作过红绿灯，每等一个红灯时间就可以过一批。