自己总结觉得重要的函数js中的防抖和节流

今天药忘吃喽~ 2023-07-24 02:46 34阅读 0赞

函数防抖：触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。

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

函数节流与 函数防抖都是为了限制函数的执行频次，以优化函数触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象。

// 防抖,考虑不能太快进入函数因此我们设置一个item 减少进入函数的次数减缓图像改变速度
            // 达到防抖的效果
            // 创见一个item
            var item=15;
            // 创建定时器
            setInterval(animation,16);
            function animation(){ 
                // 执行初始化函数
            init();
            }
            // 创建初始化函数
            function init(){ 
             
                // 每进入一次函数让item--
                item--;
                // 如果item大于0直接跳出函数
                if(item>0)return
                // 如果item小于0进入函数执行一次然后item重新赋值15
                item=15;
            
            }
    // 节流
            // 创建布尔值bool为false
            var bool=false;
                // 根据选择器获取页面中的input
                var input=document.querySelector("input");
                // 给input设置input事件
                input.addEventListener("input",inputHandler);
                // 当输入框输入是执行该函数
            function inputHandler(e){ 
                // 如果布尔值为真时直接跳出函数
                if(bool)return
                // 如果bool为false时创建个定时器没500毫秒执行一次
                var ids=setInterval(function(){ 
                    // 清除ids（定时器）
                    clearInterval(ids);
                    // // bool设置为false相当于设置了一个开关
                    bool=false;
                    // 打印input中内容
                    console.log(input.value);
                },500)
                // 然后bool设置为true
                bool=true;
            }