jQuery阻止快速连击触发相同事件


在开发过程中,经常会遇到前端Ajax提交表单的情况,有时候会因为网速或是服务器性能的问题导致无法快速响应,因此用户会多次连续点击提交,如果不做防止的话,会向服务器提交很多次相同的请求。为了解决此问题,一般情况我们会在触发Ajax事件后立刻添加按钮的失效属性(disabled),直到返回结果再移除此属性。

另辟蹊径:通过setTimeout()方法延迟执行来达到效果。

var _timer = {};

function  delay_till_last(id, fn, wait){
    if(_timer[id]) {
        window.clearTimeout(_timer[id]);
        delete _timer[id];
    }

    return _timer[id] = window.setTimeout(function(){
        fn();
        delete _timer[id];
    }, wait);  // 等待wait毫秒事件后才会去执行function(){}里面的代码
}

// 调用
$("#submit").on('click',function(){
    delay_till_last('id',function(){
        // 执行代码
    },1000);
});

// 点击提交后会等待1000毫秒,在规定等待时间内重复触发会删除计时器重新开始计时,直到等待了一个完整的1000毫秒会执行目标函数

微信扫码关注公众号-刘小七的技术站,不定期更新编程的奇淫巧计 ~

您的每一份打赏,都是对刘小七原创的支持 ~ 笔芯

声明:ITLXQ|版权所有,违者必究|如未注明,均为原创|本网站采用BY-NC-SA协议进行授权

转载:转载请注明原文链接 - jQuery阻止快速连击触发相同事件


与人为善,比聪明更重要。