jquery - 如何防止在最后一次调用完成之前执行事件

Question

我有这个 jQuery 事件:

$('#button-next').bind('click', function() {
    $.ajax({
        type: "GET",
        dataType: "json",
        url: 'index.php?route=product/category/display&cat=any&limit='+p+',1',
        cache: false,
        success: function(data) {
            var text = data.output;
            goForward('scroller', text);
            p++;
        }
    });
});

这会向列表中插入一个新项目并删除最后一个项目。问题是，如果用户开始如此快速地单击按钮，就会变得困惑。我需要一种方法来防止在最后一个调用完成之前出现新的调用。

Answer 1

您可以使用.one()订阅点击 Action 的方法:

$('#button-next').one('click', process);

您可以在其中定义process函数，如下所示:

function process() {
    $.ajax({
        type: 'GET',
        dataType: 'json',
        url: 'index.php',
        cache: false,
        data: { 
            route: 'product/category/display', 
            cat: 'any', 
            limit: p + ',1' 
        },
        success: function(data) {
            var text = data.output;
            goForward('scroller', text);
            p++;
            // we rebind the click event once again
            $('#button-next').one('click', process);
        }
    });
}