jquery - 杀死不需要的超时？

Question

基本上我做了一种运气旋转游戏。

当您单击按钮 id“提交”时，它将执行以下操作：

function loadLuck() {
    $("#luck").html('<img src="http://i.imgur.com/HSIICHd.gif" /> Please wait...');

    setTimeout(function() {
        $.post('ajax.php', {getLuck : '1'}, function(data) {
            $("#luck").html(data);
        });
    }, 1500);
}

基本上从 php 页面加载结果。

但如果我多次点击它，它会产生新的结果，与我点击的次数相同。

那是因为设置了超时。

如何每次只能启用 1 个超时？

Answer 1

使用 clearTimeout功能：

var timeoutID = '';

function loadLuck() {
    clearTimeout(timeoutID);
    $("#luck").html('<img src="http://i.imgur.com/HSIICHd.gif" /> Please wait...');
    timeoutID = setTimeout(function() {
        $.post('ajax.php', {getLuck : '1'}, function(data) {
            $("#luck").html(data);
        });
    }, 1500);
}

Answer 2

您可以使用“去抖动”功能（例如这个）。

function loadLuck() {
  // ...
}
$('.loadLuck').click($.debounce(loadLuck, 1500));