JavaScript防抖和节流

DevWiki 发布于2019-08-23 17:09 / 2108人阅读

摘要：概念函数防抖和函数节流，两者都是优化高频率执行代码的一种手段。防抖任务频繁触发的情况下，只有任务触发的间隔超过指定间隔的时候，任务才会执行。节流指定时间间隔内只会执行一次任务一定时间内方法只跑一次。

概念

函数防抖和函数节流，两者都是优化高频率执行js代码的一种手段。

防抖：任务频繁触发的情况下，只有任务触发的间隔超过指定间隔的时候，任务才会执行。

节流：指定时间间隔内只会执行一次任务（一定时间内js方法只跑一次）。

防抖



$("#debounce").on("click", debounce());

function debounce() {
    let timer;
    return function () {
        clearTimeout(timer);
        timer = setTimeout(() => {
            // 需要防抖的操作...
            console.log("防抖成功！");
        }, 500);
    }
}

函数防抖的应用场景，最常见的就是页面滚动条监听的例子，来进行解析：

let timer;
window.onscroll = function () {
    clearTimeout(timer);
    timer = setTimeout(function () {
        //滚动条位置
        let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
        console.log("滚动条位置：" + scrollTop);
    }, 200)
}

防抖函数的封装使用

/**
 * 防抖函数
 * @param fn 事件触发的操作
 * @param delay 多少毫秒内连续触发事件，不会执行
 * @returns {Function}
 */
function debounce(fn,delay) {
    let timer = null;
    return function () {
        let self = this,
            args = arguments;
        timer && clearTimeout(timer);
        timer = setTimeout(function () {
            fn.apply(self,args);
        },delay);
    }
}

window.onscroll = debounce(function () {
    let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
    console.log("滚动条位置：" + scrollTop);
},200)

节流



$("#throttle").on("click", throttle());

function throttle(fn) {
    let flag = true;
    return function () {
        if (!flag) {
            return;
        }
        flag = false;
        setTimeout(() => {
            console.log("节流成功！");
            flag = true;
        }, 1000);
    };
}

函数节流应用的实际场景，根据文本框中输入的内容自动请求后台数据
下面是节流函数的封装与使用：



$("#input").on("keyup", throttle(function () {
    console.log($(this).val());
    // ajax后台请求....
}, 1000));

/**
 * 节流函数
 * @param fn 事件触发的操作
 * @param delay 间隔多少毫秒需要触发一次事件
 */
function throttle(fn, delay) {
    let flag = true;
    return function () {
        let self = this,
            args = arguments;
        if (!flag) {
            return;
        }
        flag = false;
        setTimeout(() => {
            fn.apply(self, args);
            flag = true;
        }, delay);
    }
}

GPU云服务器云服务器 VUE防抖与节流防抖 VUE防抖函数节流

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103903.html

彻底弄懂函数防抖和函数节流

摘要：若时间差大于间隔时间，则立刻执行一次函数。不同点函数防抖，在一段连续操作结束后，处理回调，利用和实现。函数防抖关注一定时间连续触发的事件只在最后执行一次，而函数节流侧重于一段时间内只执行一次。原博客地址，欢迎star 函数防抖和节流函数防抖和函数节流：优化高频率执行js代码的一种手段，js中的一些事件如浏览器的resize、scroll，鼠标的mousemove、mouseover...

Mr_houzi 2019-08-26 13:33 评论0 收藏0
20190726-前端笔记-防抖和节流

摘要：定义定时器清空定时器重置定时器防抖流程触发触发定义一个定时器，返回执行内容为清除当前定时器，定义执行内容。防抖为了避免一些监听事件为在自己预料的情况，频繁触发。or 在某些监听命令会频繁触发事件比如resize、mousemove等等未防抖示例 var count = 0, Elem = doc.getElementById(con) ...

Thanatos 2019-08-02 15:37 评论0 收藏0
20190726-前端笔记-防抖和节流

摘要：定义定时器清空定时器重置定时器防抖流程触发触发定义一个定时器，返回执行内容为清除当前定时器，定义执行内容。防抖为了避免一些监听事件为在自己预料的情况，频繁触发。or 在某些监听命令会频繁触发事件比如resize、mousemove等等未防抖示例 var count = 0, Elem = doc.getElementById(con) ...

JasinYip 2019-08-26 10:22 评论0 收藏0
剖析前端开发中的防抖和节流

摘要：运用防抖和节流可以有效降低代码的执行频率，从而解决高频率事件的页面卡顿问题。在阶段布局，最终确定显示的位置和大小。在函数中，首先定义了一个空的定时器变量，用来计算时间间隔。还有一点要注意，在中一定要清楚定时器，不然会影响的条件判断。啥是节流？节流是保证在一段时间内，代码只执行了一次。这个一段时间内指的是不管用户操作了几次，最终仅执行一次。比如说一个按钮，用户狂点按钮，但是如果用节流...

andong777 2019-08-30 15:56 评论0 收藏0