javascript 中的通用按钮处理程序

Universal button handler in javascript

本文关键字：按钮 处理 程序 javascript      更新时间：2023-09-26

我的Web应用程序上有很多按钮，可以请求数据并将其发布到PHP以检索和更新数据库。我正在努力创建一种通用方法来防止提交表单时多次单击按钮，因为我使用的是 AJAX 和 Jquery。

这是我当前的实现，但我什至无法判断它是否有效。它似乎在 99% 的时间内都有效。

在我的常用函数中.js文件中，我有这个在全局范围内的函数

var canClick = true;
function buttonWithPromise(promise){
    if(!canClick) return;
    canClick = false;
    promise.done(function(){
        canClick = true;
    });
}

然后每当我将 .click 附加到 dom 元素时，我都会这样做：

$('body').on('click', '.table > .row', function(){
    var nbr = $(this).attr('nbr');  
    buttonWithPromise(get_count(nbr));
});

并且可能调用的某些函数将具有延迟对象。

function get_count(){
    var defer = $.Deferred();
    var options = "getCount"
    Query.init(options)
        .fetchData(function(data){   //Ajax data request
            if(data){
            }
            defer.resolve();
    });
    return defer.promise();
}

由于这有时才有效，所以我可以说这是错误的。有什么改进建议吗？

Javascript中的所有内容都是一个对象，是吗？那么为什么不呢：

$('body').on('click', '.button', function()
{
    // Set default value of property
    if(typeof this.isClicked === 'undefined')
        this.isClicked = false;
    // Check if button is working
    if(this.isClicked)
    {
        // Send error to console if button is busy
        console.log('Cannot click as a network action is occuring!');
    }else
    {
        // Begin new network action if button is not busy
        var self = this;
        console.log('Begin network for: ' + $(this).text());
        this.isClicked = true;
        setTimeout(function()
                   {
                       // Reset button state once network action is done
                       console.log('End network for: ' + $(self).text());
                       self.isClicked = false;
                       //Call any callbacks/promises here
                   }, 5000);
    }
});

小提琴：

http://jsfiddle.net/mdLfug1t/

注意：我正在使用 setTimeout 来模拟 ajax 请求

编辑：让我更多地将其置于上下文中：

function buttonWithPromise(promise)
{
    if(typeof promise.canClick === 'undefined')
        promise.canClick = true;
    if(!promise.canClick) return;
    promise.canClick = false;
    promise.done(function()
    {
        promise.canClick = true;
    });
}

你遇到的问题是"canClick"是全球性的，因此每个承诺都会被修改。您需要使其成为承诺的属性，以便您可以创建无限的承诺，每个承诺都有自己的canClick实例。

相关文章：