Javascript 如何在按下按钮时取消超时？

我正在创建一个删除函数来删除系统中的项目。基本上，管理员可以单击“删除”按钮删除项目。出现这个问题是因为一些管理员喜欢触发或过于热情，因此需要撤消删除

我提出的解决方案包括一个撤销按钮，在实际项目被删除之前会出现20秒，类似于Gmail实验室中的撤销发送电子邮件功能

function deleteStuff(type,id){
    var element = $("#"+type+id);
    element.slideUp(500,function(){element.html("<button class='btn undoDelete' >UNDO</button>");});
    var timeout = window.setTimeout(element.slideDown(),20000);
    if($(".undoDelete").click()){
         clearTimeout(timeout);
         //replace the item
    } else {
         //delete the item with ajax
    }
}

函数deleteStuff（类型，id）{
变量元素=$（“#”+类型+id）；
slideUp（500，function（）{element.html（“UNDO”）；}）；
var timeout=window.setTimeout（element.slideDown（），20000）；
如果（$（“.undoDelete”）。单击（）{
clearTimeout（超时）；
//替换该项目
}否则{
//使用ajax删除该项
}
}

我知道您可以使用

stop（）

或

clearTimeout（）

来停止超时，但我想知道的是如何在函数中执行此操作。到目前为止，我已经考虑过每秒钟检查一次点击直到20秒，但我不确定这是否是最有效的方法

请记住，此函数可以同时调用多次

---

说清楚一点，我知道这个功能不完整（例如，无法完全恢复），但这与此无关。函数的其余部分只是设置超时部分的上下文。

Javascript是单线程的，您不能“等待”事件。您必须在事件处理程序中执行所需的操作

function deleteStuff(type,id){
    var element = $("#"+type+id);
    timeout = window.setTimeout(function() { element.slideDown() },20000);
    element.slideUp(500,function(){element.html("<button class='btn undoDelete'  data-timeout='"+timeout+"'>UNDO</button>");});
}
$(document).on("click", ".undoDelete", function() {
    clearTimeout($(this).data('timeout'));
});

函数deleteStuff（类型，id）{
变量元素=$（“#”+类型+id）；
timeout=window.setTimeout（function（）{element.slideDown（）}，20000）；
slideUp（500，function（）{element.html（“UNDO”）；}）；
}
$（文档）。在（“单击”、“.undoDelete”上，函数（）{
clearTimeout（$（this.data（'timeout'））；
});

---

您需要将事件委派与

.on（）

一起使用，因为它绑定到动态创建的元素。

Javascript是单线程的，您不能“等待”事件。您必须在事件处理程序中执行所需的操作

function deleteStuff(type,id){
    var element = $("#"+type+id);
    timeout = window.setTimeout(function() { element.slideDown() },20000);
    element.slideUp(500,function(){element.html("<button class='btn undoDelete'  data-timeout='"+timeout+"'>UNDO</button>");});
}
$(document).on("click", ".undoDelete", function() {
    clearTimeout($(this).data('timeout'));
});

函数deleteStuff（类型，id）{
变量元素=$（“#”+类型+id）；
timeout=window.setTimeout（function（）{element.slideDown（）}，20000）；
slideUp（500，function（）{element.html（“UNDO”）；}）；
}
$（文档）。在（“单击”、“.undoDelete”上，函数（）{
clearTimeout（$（this.data（'timeout'））；
});

---

您需要将事件委派与

.on（）

一起使用，因为这会绑定到动态创建的元素。

存在一些问题。您正在使用jQuery对象（

元素.slideUp的返回值）调用
setTimeout
，但是您应该为它提供一个函数。您也永远不会恢复按钮（如果用户单击“撤消”），并且实际上没有任何东西可以阻止删除的发生

我试了一下：

function deleteStuff(type,id){
    var element, timeout;

    element = $("#"+type+id);
    element.slideUp(500, function() {
        // Update button and slide down *immediately*
        element.html("<button class='btn undoDelete' >UNDO</button>")
                .one("click", function() {
                    // Stop the delete
                    clearTimeout(timeout);

                    // Restore the button
                    // ...exercise for the reader...
                },
                .slideDown();
    });
    timeout = window.setTimeout(function() {
        // Delete item with ajax
    }, 20000);
}

这里有一些问题。您正在使用jQuery对象（
元素.slideUp的返回值）调用
setTimeout
，但是您应该为它提供一个函数。您也永远不会恢复按钮（如果用户单击“撤消”），并且实际上没有任何东西可以阻止删除的发生

我试了一下：

function deleteStuff(type,id){
    var element, timeout;

    element = $("#"+type+id);
    element.slideUp(500, function() {
        // Update button and slide down *immediately*
        element.html("<button class='btn undoDelete' >UNDO</button>")
                .one("click", function() {
                    // Stop the delete
                    clearTimeout(timeout);

                    // Restore the button
                    // ...exercise for the reader...
                },
                .slideDown();
    });
    timeout = window.setTimeout(function() {
        // Delete item with ajax
    }, 20000);
}

你在底部添加的观点很好。我从来没想过。最完整和有用的答案。谢谢你在底部添加的观点很好。我从来没想过。最完整和有用的答案。谢谢