js节流与防抖，防止重复提交、防止频繁重复点击

最新推荐文章于 2025-01-20 09:49:31 发布

叫我官人_

最新推荐文章于 2025-01-20 09:49:31 发布

阅读量1.8k

点赞数

分类专栏： JS

原文链接：https://blog.youkuaiyun.com/web_xyk/article/details/80165824

版权

JS 专栏收录该内容

14 篇文章

订阅专栏

本文详细介绍了前端开发中常见的防抖(debounce)与节流(throttle)技术的应用场景和实现方法。针对按钮多次点击及输入框频繁查询的问题，通过自定义函数控制事件触发频率，有效提升了用户体验和系统性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、节流、防止短时间多次提交操作

现有一提交按钮<button id="submit">提交</button>点击后提交表单信息。

但是经常会出现： 1.不小心点了多次，就提交了多次

2.网络卡顿的时候网页没反应，用户频繁点击的情况

// 即这种写法：
var subBtn = document.getElementById('submit');
subBtn.addEventListener('click', ajaxForm, false)
 
// 提交方法
function ajaxForm(e) {
    console.log(e.target)
    console.log('执行提交操作', new Date().getTime())
}

通过添加节流函数来解决

/*节流函数，通过控制每次事件执行的时间间隔控制短时间多次执行方法
handler:要执行的方法
wait：每次点击事件执行的时间间隔(毫秒)
*/
 
function throttle(handler, wait) {
 
    var lastTime = 0;
 
    return function () {
    
        var nowTime = new Date().getTime();
 
        if (nowTime - lastTime > wait) {
            handler.apply(this, arguments);
            lastTime = nowTime;
        }
 
    }
}
 
// 提交方法
function ajaxForm(e) {
    console.log(e.target)
    console.log('执行提交操作', new Date().getTime())
}
 
var subBtn = document.getElementById('submit');
subBtn.addEventListener('click', throttle(ajaxForm, 1000), false)

二、防抖动

应用场景：模糊查询，根据输入内容提示相关完整内容 (浏览器必备功能)

不好的写法：

function showAll(e) {
    console.log(e.target)
    console.log('执行查询操作', new Date().getTime())
}
 
var searchInput = document.getElementById('search');
searchInput.addEventListener('keyup', showAll, false)

通过添加防抖函数来优化查询体验

/*防抖函数，通过推迟每次事件执行的时间来减少不必要的查询
handler:要执行的方法
delay：每次事件执行的推迟时间(毫秒)
*/
 
function debounce(handler, delay) {
    var timer;
 
    return function () {
        var self = this, arg = arguments;
 
        clearTimeout(timer);
 
        timer = setTimeout(function () {
            handler.apply(self, arg)
        }, delay)
    }
}
 
function showAll(e) {
    console.log(e.target)
    console.log('执行查询操作', new Date().getTime())
}
 
var searchInput = document.getElementById('search');
searchInput.addEventListener('keyup', debounce(showAll, 500), false)

转载来源：https://blog.youkuaiyun.com/web_xyk/article/details/80165824