防抖和节流

不善言辞丿

已于 2022-05-26 11:18:20 修改

阅读量156

点赞数

文章标签： javascript 前端

于 2022-05-26 10:36:43 首次发布

本文链接：https://blog.csdn.net/hjx547180661/article/details/124979608

版权

本文仅供学习用，有一部分自己的理解和摘录大佬的代码，在这做一个记录

一，防抖

防抖就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

比方说，事件被触发，他会等待n秒，之后在触发，如果再n秒内再次被触发，就要重新等待n秒

HTML代码

<body>
    <button>test</button>
</body>

JavaScript代码

    //防抖debounce代码：
    function debounce(fn, delay) {
        var timeout = null; // 创建一个标记用来存放定时器的返回值
        return function (e) {
            // 每当用户输入的时候把前一个 setTimeout clear 掉
            clearTimeout(timeout);
            // 然后又创建一个新的 setTimeout, 这样就能保证interval 间隔内如果时间持续触发，就不会执行 fn 函数
            timeout = setTimeout(() => {
                fn.apply(this, arguments);
            }, delay);
        };
    }

    let num = 1
    function getnum(){
        console.log('我被触发了' + num++ +'次')
    }
    // 使用防抖（保持频率一直点击的话，函数的触发时间会被一直延后）
    document.querySelector('button').addEventListener('click',debounce(getnum,2000))
    // 不使用防抖
    // document.querySelector('button').addEventListener('click',getnum)

二，节流

节流就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率

也就是说，在一段时间内（n秒），无论你怎么去调用这个函数，都只会触发一次，甚至可以选择触发第一次或者是最后一次

HTML代码

<body>
    <button>test</button>
</body>

JavaScript代码

    // 节流throttle代码：
    // 在一段时间内，只触发最后一次
    function throttle(fn, delay) {
        let canRun = true; // 通过闭包保存一个标记
        return function () {
            // 在函数开头判断标记是否为true，不为true则return
            if (!canRun) return;
            // 立即设置为false
            canRun = false;
            // 将外部传入的函数的执行放在setTimeout中
            setTimeout(() => {
                // 最后在setTimeout执行完毕后再把标记设置为true(关键)表示可以执行下一次循环了。
                // 当定时器没有执行的时候标记永远是false，在开头被return掉
                fn.apply(this, arguments);
                canRun = true;
            }, delay);
        };
    }

    // 在一段时间内，只触发第一次
    function throttle(fn, delay) {
        let canRun = true; // 通过闭包保存一个标记
        return function () {
            // 在函数开头判断标记是否为true，不为true则return
            if (!canRun) return;
            // 立即设置为false
            canRun = false;
            // 立即触发
            fn.apply(this, arguments);
            // 将外部传入的函数的执行放在setTimeout中
            setTimeout(() => {
                // 最后在setTimeout执行完毕后再把标记设置为true(关键)表示可以执行下一次循环了。
                // 当定时器没有执行的时候标记永远是false，在开头被return掉
                canRun = true;
            }, delay);
        };
    }

    let num = 1
    function getnum(){
        console.log('我被触发了' + num++ +'次')
    }
    // 使用节流
    document.querySelector('button').addEventListener('click',throttle(getnum,2000))
    // 不使用节流
    // document.querySelector('button').addEventListener('click',getnum)

仅仅只是在节流函数内更改了触发函数的位置，就有不同的效果，做一个简单的封装

    // 以上两个函数，仅仅更改了触发函数的位置，可以做一个封装,来决定选用哪种方式使用节流
    function throttle(fn, delay ,isfirst= true) {//默认为true
        let canRun = true; // 通过闭包保存一个标记
        return function () {
            // 在函数开头判断标记是否为true，不为true则return
            if (!canRun) return;
            // 立即设置为false
            canRun = false;
            if(isfirst){
                fn.apply(this, arguments);
            }
            // 将外部传入的函数的执行放在setTimeout中
            setTimeout(() => {
                // 最后在setTimeout执行完毕后再把标记设置为true(关键)表示可以执行下一次循环了。
                // 当定时器没有执行的时候标记永远是false，在开头被return掉
                if(!isfirst){
                fn.apply(this, arguments);
                }
                canRun = true;
            }, delay);
        };
    }

    let num = 1
    function getnum(){
        console.log('我被触发了' + num++ +'次')
    }
    // 使用节流
    document.querySelector('button').addEventListener('click',throttle(getnum,2000,false))
    // 不使用节流
    // document.querySelector('button').addEventListener('click',getnum)

三，使用场景

防抖（debounce）
1.search搜索时，用户在不断输入值时，用防抖来节约请求资源。无需每增加一个字就返回关联信息，而是在一段时间内，保证用户输入一整段字符后去做关联

节流（throttle）
1.鼠标不断点击触发，mousedown(单位时间内只触发一次)，防止用户恶意的频繁点击按钮造成的页面卡死，或者是调用ajax时频繁的返回同一个内容，甚至是因为返回内容的不同步而产生的bug
2.监听滚动事件，滚动事件的触发频率极高，过大的消耗内存，可以适当的减少触发频率

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

不善言辞丿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
防抖和节流

本文仅供学习用，有一部分自己的理解和摘录大佬的代码，在这做一个记录一，防抖防抖就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。比方说，事件被触发，他会等待n秒，之后在触发，如果再n秒内再次被触发，就要重新等待n秒HTML代码<body> <button>test</button></body>JavaScript代码 //防抖debounce代码： f
复制链接

扫一扫