点击按钮

Question

我遇到以下问题：元素触发的事件数量不断累积。按下按钮触发以下功能saveList()：

function saveList(data)
{
    var cnt = 0;
    for(var i=0;i<data.length; i++)
    {
        perform_XMLHTTPRequest_Action(data[i].imgURL, function(result)
        {
            ...//some action done here
            cnt++;
            if(cnt >= data.length)
            {
                var savedList_ready = new Event('savedlist_ready');
                var page = document.getElementById('page-2');
                page.dispatchEvent(savedList_ready);
            }
        });
    }
}

然后在其他地方调用事件时调用另一个函数。听众如下：

$(document).on('tap', 'button2', function(){
    getData(callBack, onError);
})

saveList()函数由callBack()调用。

function callBack(data){
    saveList(data);
    $(document).on('savedList_ready', '#page-2', function(){
        ...
    });
}

我意识到，saveList()触发的事件数量随着按下按钮的次数而累积。例如，当我第五次按下button2时，将同时触发5个事件。有什么我可以做的事情来限制事件的数量？如果没有，你会如何建议我解决问题？ （数据中的每个对象都有属性imageUrl，需要通过ajax进行更新）。

提前致谢， 肯

Answer 1

单击时可以禁用该按钮

$(document).on('tap', 'button2', function(){
    $(this).prop('disabled',true);
    getData(callBack, onError);
})

并在调用回调时重新启用它

function callBack(data){
    saveList(data);
    $(document).on('savedList_ready', '#page-2', function(){
         $('button2').prop('disabled',false);
        ...
    });
}