JS 定时器结合闭包实现-节流与防抖

最新推荐文章于 2024-01-03 21:45:00 发布

原创

最新推荐文章于 2024-01-03 21:45:00 发布 · 987 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #es6

本文介绍了JavaScript中防抖和节流的概念与应用。防抖技术能确保在一系列连续操作后只执行最后一次回调，常用于百度搜索框等实时反馈场景，防止频繁请求。而节流则限制了回调的执行频率，确保在设定的时间间隔后才执行，适用于性能优化和避免过度触发。

防抖：

概念：用户连续点击，前面的触发都被取消，只有最后一次触发的回调在规定时间后才会触发。

即：如果连续触发只会执行最后一次触发的回调。

使用场景：

百度搜索框中输入对应内容下方会有相关内容的提示，如果每输入一个文字都发送一次请求是非常浪费性能的，所以使用节流设置一个时间，只有当用户输入完内容之后不在输入，经过了预先设置好的时间才会发起请求。

// 防抖
// 概念：用户连续点击，前面的触发都被取消，只有最后一次触发的回调在规定时间后才会触发。
// 即 如果连续触发 只会执行最后一次触发的回调
// 绑定点击事件后，还要传入一个回调函数，所以通过返回一个函数，让绑定的事件去触发这个返回的函数
var btn = document.getElementById('input');
btn.addEventListener('click', debounce(submit));
function submit() {
    console.log(1);
}
function debounce(fn) {
    var t = null;
    return function () {
        if (t) {
            clearTimeout(t);   // 如果连续触发，则每次都会清除上一个定时器并重新开启一个定时器
        }
        t = setTimeout(function () {
            fn(e)
        }, 1000)
    }
}