按下按钮时如何取消暂停？

我正在创建删除功能来删除系统中的项目。基本上，管理员可以点击删除按钮并删除一个项目。问题出现了，因为有些管理员感到满意或过于热情，因此需要撤消删除。按下按钮时如何取消暂停？

我建议的解决方案涉及一个撤销按钮，它在实际项目被删除之前显示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秒，但我不确定这是否是最有效的方式。

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

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

来源

2014-01-18 Huey

那里有几个问题。你用jQuery对象（返回值为element.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); 
}

这个工程即使有多个重叠调用的功能，所提供的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); 
}

来源

2014-01-18 07:16:28

您在底部添加的好点。我从来没想过这点。最完整和有用的答案。谢谢！ – Huey

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()因为这是结合动态创建的元素。

来源

2014-01-18 07:16:12 Barmar

按下按钮时如何取消暂停？

回答

相关问题