2022-01-01【技术】一篇让你彻底明白防抖和节流以及应用场景

1.谈一谈防抖与节流？有什么区别？如何实现？
定义

所谓防抖，就是指触发事件后，在 n 秒后函数才会执行，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。
所谓节流，就是指连续触发事件，但是在 n 秒中只执行一次函数。

区别

函数节流不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数，而函数防抖只是在最后一次事件后才触发一次函数。

使用场景

防抖：
1、搜索框搜索输入。只需用户最后一次输入完，再发送请求。
2、手机号、邮箱验证输入检测。
3、窗口大小Resize。只需窗口调整完成后，计算窗口大小。防止重复渲染。

节流：
1、滚动加载，加载更多或滚到底部监听。
2、谷歌搜索框，搜索联想功能。
3、高频点击提交，表单重复提交。

2.防抖的使用 例：

    
    
    


    

        
防抖演示
        
防抖演示
        
防抖演示
        
防抖演示
        
防抖演示
        
防抖演示
        
防抖演示
        
防抖演示
        
防抖演示
    

3.节流的使用

    
    
    


    

        
节流演示
        
节流演示
        
节流演示
        
节流演示
        
节流演示
        
节流演示
        
节流演示
        
节流演示
        
节流演示
        
节流演示
        
节流演示
        
节流演示
        
节流演示
        
节流演示
        
节流演示
        
节流演示
        
节流演示
        
节流演示
        
节流演示
        
节流演示
        
节流演示
        
节流演示
        
节流演示
        
节流演示
        
节流演示
        
节流演示
        
节流演示
        
节流演示
        
节流演示
        
节流演示
        
节流演示
        
节流演示
        
节流演示
        
节流演示
        
节流演示
        
节流演示
    

拓展：

js防抖与节流以及应用场景

在前端开发中会遇到一些频繁的事件触发，例如input，keyup，keydown，scroll，resize，mousemove等，这非常影响性能，所以我们需要控制它们触发的频率，方法就是防抖与节流。

防抖
防抖的原理就是：要等你触发完事件 n 秒内不再触发事件，我才执行。

 //debounce 
    function debounce(func, wait) {
        var timeout;
        return function () {
            var context = this;
            var args = arguments;
            clearTimeout(timeout);
            timeout = setTimeout(function () {
                func.apply(context, args)
            }, wait);
        }
    }

节流
节流的原理很简单：如果你持续触发事件，每隔一段时间，只执行一次事件。
有两种主流的实现方式，一种是使用时间戳，一种是设置定时器。

(1)时间戳实现
特点：第一次事件会立刻执行，停止触发后没有办法再执行事件。

function throttle(func, wait) {
        var previous = 0;
        return function () {
            var now = Date.now();
            var context = this;
            var args = arguments;
            if (now - previous > wait) {
                func.apply(context, args);
                previous = now;
            }
        }
    }

(2)定时器实现
特点：会在 n 秒后第一次执行，事件停止触发后依然会再执行一次事件。

function throttle(func, wait) {
        var timeout;
        return function () {
            var context = this;
            var args = arguments;
            if (!timeout) {
                timeout = setTimeout(function () {
                    func.apply(context, args);
                    timeout = null;
                }, wait)
            }
        }
    }

应用场景：
防抖：
1.浏览器窗口 缩放，resize事件，常见于需要做页面适配的时候，需要 根据最终呈现的页面情况进行dom渲染。
2.表单的按钮提交事件，例如登录，发短信，避免用户点击太快，以至于发送了多次请求。
3.search搜索框输入，只需用户最后一次输入完在发送请求。
4.文本编辑器实时保存，当无任何更改操作1s后进行保存。

节流：
1.鼠标不断点击触发，mousedown（单位时间内只触发一次） mousemove事件。
2.商品预览图的放大镜效果。
3.谷歌搜索框（支持实时搜索），搜索联想功能。
4.scroll事件，每隔1s计算一次位置信息。

窗外
雨落纷纷
宿雾空