手写防抖节流

师傅我悟了

已于 2022-08-01 08:42:49 修改

阅读量183

点赞数

文章标签： javascript

于 2022-07-15 09:58:57 首次发布

本文链接：https://blog.csdn.net/neverlandkk/article/details/125797903

版权

本文介绍了防抖和节流的概念及其在处理高频事件如onresize、onmousemove时的重要性，以减少不必要的API交互。作者分享了手动实现防抖和节流的函数，并通过举例说明它们的应用，如表单提交和窗口尺寸变化。文章强调了这两种技术在优化性能和提升用户体验上的作用，并提供了手写代码示例以加深理解。

摘要由CSDN通过智能技术生成

最初了解防抖节流的时候，只是了解其概念，防抖和节流无非就是相应跟不上处罚频率。说白了就是onresize，onmousemove这种事件，触发过于频繁，假设这个行为需要和后台有一个api的交互，那显而易见的，它猛发猛fetch也是不行，所以需要节流，防抖。那写一下关于自己的理解，不喜勿喷。有错误请指点，十分感谢

初衷是这样

节流：

固定周期只会触发一次。距上一次触发过一段时间，就是onresize，不会一直触发，根据自己设定的时间，比如间隔1s才会触发一次
然后最好自己手写一下其实简单我自己也是才手写了一下，面试老问，虽然lodash里面也有，但是，主要提高自己（面试），哈哈哈哈哈哈，你懂吧，手写就完事了

  const resize = () => {
            console.log('窗口发成变化啦')
        }

        const throttle = (func, delay) => { //new date 版本节流
            let last = 0;
            return function () {
                var now = Date.now()
                if (now >= last + delay) {
                    func.apply();
                    last = now
                } else (
                    console.log('还节流呢 兄弟')
                )
            }
        }

        const throttleByTimer = (func, delay) => { //定时器版本节流
            let timer = null;
            return function () {
                if (!timer) {
                    func()
                    timer = setTimeout(() => {
                        timer = null
                    }, delay)
                } else {
                   console.log('防抖')
                }
            }
        }

        //防抖 debounce
        window.addEventListener(
            'resize', throttleByTimer(resize, 5000))
        window.addEventListener(
            'resize', throttle(resize, 5000))

防抖：

就是当事件触发的时候，过一段时间才会触发，比如一个用户猛提交一个表单（假设前端没有loading按钮的情况下）就需要他猛点的时候，只执行最后一次的事件。

 const dedounce = (func,delay) => {
            var timeout = null;
            return function(){
                clearTimeout(timeout)
                timeout = setTimeout(() => {
                    func()
                },delay)
            }
        }

        //防抖 debounce
        window.addEventListener(
            'resize', dedounce (resize, 5000))