CODEWITHSUNDEEP
javascriptjquery
Somk
Somk

Reputation: 12047

jQuery delay being ignored

I have the below code running but for some reason, no matter where I place the delay the line executes immediately.

Any help would be greatly appreciated.

$('#team_a_grid, #team_b_grid').on("click", "td.clickable", function(){
    var dot_or_cross ='<span>Dot</span>'
    $(this).delay(3000).removeClass().html(dot_or_cross);
});

Upvotes: 0

Views: 80

Answers (1)

Anton
Anton

Reputation: 32581

Use .setTimeout()

$('#team_a_grid, #team_b_grid').on("click", "td.clickable", function () {
    var dot_or_cross = '<span>Dot</span>'
    var $this=$(this);
    setTimeout(function () {
        $this.removeClass().html(dot_or_cross);
    }, 3000);
});

As pointed out in the comments

The .delay() method is best for delaying between queued jQuery effects. Because it is limited—it doesn't, for example, offer a way to cancel the delay—.delay() is not a replacement for JavaScript's native setTimeout function, which may be more appropriate for certain use cases.

Doc reference

Upvotes: 3

Related Questions