页面被连续点击，发送多次请求，解决方案

最新推荐文章于 2023-03-01 16:27:53 发布

原创最新推荐文章于 2023-03-01 16:27:53 发布 · 991 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

JavaScript 同时被 2 个专栏收录

7 篇文章

订阅专栏

杂七杂八学一招

5 篇文章

订阅专栏

本文介绍了一种称为防抖动(debounce)的技术，通过设置一个阈值来限制两次Ajax通信的最小间隔时间，以减少不必要的网络请求。当用户输入停止后，才执行网络请求操作，有效提高了系统的响应速度。

设置一个门槛值，表示两次 Ajax 通信的最小间隔时间。如果在间隔时间内，发生新的keydown事件，则不触发 Ajax 通信，并且重新开始计时。如果过了指定时间，没有发生新的keydown事件，再将数据发送出去。

这种做法叫做 debounce（防抖动）。假定两次 Ajax 通信的间隔不得小于2500毫秒。

var timer = null; // 声明计时器

function debounce(fn, delay){
    console.log("timer:", timer)
    // 清除定时器
    clearTimeout(timer);
    // 新的定时器值
    timer = setTimeout(fn, delay);
}

function getBaidu() {
    console.log("按钮被点击")
    debounce(function () {
        console.log("发送网络请求")
    }, 2500)
}