javascript - setTimeoutが正しく機能していません

Question

ボタンがクリックされた後、たとえば5秒間無効にしてから、もう一度有効にするスクリプトがあります。

$(document).on('click', 'button', function () {
    var htmls = $(this).html();
    $(this).prop("disabled", true);
    setTimeout(function () {
        $(this).prop("disabled", false);
        $(this).html(htmls);
    }, 5000);
    $(this).html('<img src="<?=CDN(' / icons / loading / loading5.gif ')?>" />');
});

どういうわけかsetTimeout終了しないので、ボタンは再び有効になりません。エラーメッセージが表示されません。

Answer 1

ハンドラー内のキーワードはオブジェクトを参照しているため、呼び出す$(this)前に変数に保存します。setTimeoutthissetTimeoutwindow

$(document).on("click", "button", function() {
    var $this = $(this),
        htmls = $this.html();

    $this.prop("disabled", true)
         .html('<img src="..." />');

    setTimeout(function() {
       $this.prop("disabled", false)
            .html(htmls);
    }, 5000);
});

Answer 2

ここではDOM要素を参照していません。別のtemarory変数に入れてみてください。setTimeOut

 var $this = $(this),
        htmls = $this.html();

    $this.prop("disabled", true);
    setTimeout(function() {
       $this.prop("disabled", false).html(htmls);
    }, 5000);