防抖和节流

• 节流: n 秒内只运行一次，若在 n 秒内重复触发，只有一次生效(间隔时间，延迟触发)
• 防抖: n 秒后在执行该事件，若在 n 秒内被重复触发，则重新计时（节约性能，只触发最后一次）

防抖

思路：

1. 事件函数执行,先创建个定时器

2. 把逻辑代码放到定时器中

3. 当函数再次触发,清除定时器

4. 创建—个新定时器即司

基础使用：

  // 问题: 搜索框只要改变就马上触发函数 执行ajax请求
        // 实际: 用户只想搜索adidas (a, ad, adi, adid.. 但是每个字母都触发了一次网络请求(浪费资源流量/性能不高))
        // 防抖函数目的: 提高性能(优化体验)
        // 1. 把逻辑代码装入定时器中，设置延迟时间
        // 2.清空上一次定时器
        let timer = null;
        $("#ipt").on("input", function () {
            clearTimeout(timer)
            timer = setTimeout(() =>{
                var kw = $(this).val();
                console.log(kw)
                // 后面发送请求
            },500)   
        });

高级封装：

 $("#ipt").on("input", debounce(function(){
            console.log($(this).val())
         },500))
               

        function debounce(fn,delay) {
            let timer = null;
            return function() { // 真正的事件处理函数，this：事件的触发者
                clearTimeout(timer);
                timer = setTimeout(() => {
                    fn.call(this)  // 将事件触发者的this返回
                },delay)
            }
        }

节流

思路：

1. 事件函数执行,先判断有定时器,则直接return
2. 把逻辑代码放到定时器中
3. 定时器执行后,置空定时器变量
4. 下载事件函数执行时,再创建一个新定时器即可

高级封装：

 $(document).on('scroll',throttle(function(){
            // 代码逻辑
        },500))

        function throttle(fn,delay) {
            return function () {
                if(fn.t) return // 如果有定时器，就停止运行
                fn.t = setTimeout( () => {
                    fn.call(this)   // 确保上面函数中this关键词是事件源
                    fn.t = null  // 置空，让事件再次书法的时候，重新创建一个定时器
                },delay)
            }
        }

应用场景

防抖在连续的事件，只需触发一次回调的场景有：

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

节流在间隔一段时间执行一次回调的场景有：

• 滚动加载，加载更多或滚到底部监听
• 搜索框，搜索联想功能