javascript - JavaScript 中的通用按钮处理程序

Question

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

这是我当前的实现，但我什至不知道它是否有效。看起来 99% 的时间都有效。

在我的常用functions.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();
}

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

Answer 1

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);
    }
});

fiddle :

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”是全局的，因此会被每个 promise 修改。您需要将其设为 Promise 的属性，以便可以创建无限的 Promise，每个 Promise 都有自己的 canClick 实例。