jQuery. Как передать элемент в setTimeout

308

16 января 2017, 21:31

Подписываюсь на событие click для всех кнопок с классом btn. Нужно, чтобы при клике нажатая кнопка становилась неактивной, а через 3 секунды становилась обратно активной.

$(function() { 
    $(".btn").each(function() { 
        $(this).on("click", function() { 
            $(this).attr("disabled", "true"); 
            setTimeout(function() { 
                $(this).removeAttr("disabled"); 
            }, 3000); 
        }); 
    }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<input type="submit" class="btn" value="Add"/>

Так кнопка становится неактивной, но не срабатывает функция внутри setTimeout, точнее она вроде срабатывает, но она не понимает, что за элемент $(this).

При этом ошибок в консоли нет.

Собственно как быть?

Так работает, но этот вариант не устраивает

$(function() { 
    $(".btn").each(function() { 
        $(this).on("click", function() { 
            $(this).attr("disabled", "true"); 
            setTimeout(function() { 
                $(".btn").removeAttr("disabled"); 
            }, 3000); 
        }); 
    }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<input type="submit" class="btn" value="Add"/>

Answer 1

$(".btn").each(function() {
    $(this).on("click", function() {
        var that = $(this);
        that.attr("disabled", "true");
        setTimeout(function() {
            that.removeAttr("disabled");
        }, 3000);
    });
});

Но зачем цикл?

$(".btn").on("click", function() {
    var that = $(this);
    that.attr("disabled", "true");
    setTimeout(function() {
        that.removeAttr("disabled");
    }, 3000);
});

или

$(".btn").on("click", function() {
    $(this).attr("disabled", "true");
    setTimeout(function() {
        $(this).removeAttr("disabled");
    }.bind(this), 3000);
});

Answer 2

Например, использовать переменную

$(".btn").each(function() {
    $(this).on("click", function() {
        var self = $(this);
        self.attr("disabled", "true"); 
        setTimeout(function() {
            self.removeAttr("disabled");
        }, 3000);
    });
});