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

这个有效！我的问题

有更好的方法吗？我的第一次失败的尝试有多个处理程序。
为什么它在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);

如何取消延迟的DOM元素删除

3 个答案: