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 をサポートしていないか、JavaScript 1.7 の埋め込み方法がサポートされていないため、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);