javascript - 如何取消延迟的 DOM 元素移除

Question

我试图在延迟后删除一个 DOM 元素。我还希望通过用户单击取消此删除（如果他们在计时器到期之前单击。这就是我所拥有的：

<div class="delete">Delete me!</div>

显然，我只显示相关来源。

$("div.delete").click(function() {
    var element = $(this),
        timeout = element.attr('data-timeout');
    if (timeout) {
        clearTimeout(timeout);
        element.removeAttr('data-timeout');
        element.text("Delete me!");
    } else {
        timeout = setTimeout(function() {
            element.remove();
            alert('Sniff, too late!');
        }, 2000);
        element.attr('data-timeout', timeout);
        element.text("Save me!");
    }
});

这行得通！我的问题

1. 有没有更好的办法？我第一次失败的尝试有多个处理程序。
2. 为什么它在 Javascript 1.7 中不起作用？

http://jsfiddle.net/zhon/H8a9J/

Answer 1

它不适用于 JavaScript 1.7，因为您使用的浏览器不支持它和/或它的嵌入方式。你的小提琴适用于 Firefox。

http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28ECMAScript%29

Answer 2

您需要timeout在处理程序之外定义。

var timeout;
$("div.delete").click(function() {
    var element = $(this);
    if (timeout) {
        clearTimeout(timeout);
        timeout = undefined;
        element.text("Delete me!");
    } else {
        timeout = setTimeout(function() {
            element.remove();
            alert('Sniff, too late!');
        }, 2000);
        element.text("Save me!");
    }
});

我建议将代码附在其他函数中以添加处理程序，以避免使用超时 ID 混淆全局命名空间。

Answer 3

制作timeout一个全局，并在用户单击时将其清除。

clearTimeout(timeout);