Question

我正在创建一个删除功能来删除系统中的项目。基本上，管理员可以单击删除按钮并删除项目。问题出现了，因为有些管理员很高兴或者过于热情，所以需要撤消删除。

我建议的解决方案涉及一个撤消按钮，该按钮在删除实际项目之前显示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
    }
}

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

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

要清楚，我知道这个功能不完整（例如不会完全恢复），但那是无关紧要的。该函数的其余部分仅设置超时部分的上下文。

Answer 1

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

您需要将事件委派与.on()一起使用，因为它绑定到动态创建的元素。

Answer 2

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

我对此进行了简短的抨击：

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

如果id值不同，即使对函数有多个重叠调用，这也有效，因为每个调用都有自己的timeout变量。

然而，如果用户删除了某些内容，然后导航离开该页面该怎么办？我作为一个用户的期望是该东西将被删除，但你的删除代码永远不会运行。

相反，我建议立即向服务器发送信息，如果用户取消将发送到服务器。在实际删除之前，服务器将负责等待20秒。近伪代码：

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

    // Send "pending delete" to server
    // ...

    // Update button
    element = $("#"+type+id);
    element.slideUp(500, function() {
        element.html("<button class='btn undoDelete' >UNDO</button>")
                .one("click", function() {
                    // Cancel timer
                    clearTimeout(timeout);

                    // Send "cancel delete" to server
                    // ...

                    // Restore the button
                    // ...
                },
                .slideDown();
    });
    timeout = window.setTimeout(function() {
        // Remove or restore the button
        // ...
    }, 20000);
}

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

2 个答案: