Why is this setTimeout method not working?

Question

I am trying to use a setTimeout() method to change some CSS properties using jQuery, but my method isn't working. I keep getting "Script error" exactly when the function is supposed to be executed. The code editor is not tailored to jQuery, so that's probably all I'm going to get. I've narrowed the cause down to the setTimeout keyword specifically, the code block inside of it is not causing the error. I've looked around and nobody else seems to have my current problem. So what's wrong?

else{//cards do NOT match
    $(this).css("backgroundColor", "#ff6666");
    $(cardId).css("backgroundColor", "#ff6666");
    setTimeout(function(){
       $(cardId).children().hide();
       $(cardId).css("backgroundColor", "white");
       $(this).children().hide();
       $(this).css("backgroundColor", "white");
    }, 1500);
}

score 0 · Answer 1 · answered Nov 02 '17 at 01:52

Your this keyword is incorrect. You can either use a lambda to not change context. Or you can set "this" in a variable.

else {//cards do NOT match
    $(this).css("backgroundColor", "#ff6666");
    $(cardId).css("backgroundColor", "#ff6666");
    setTimeout(() => {
       $(cardId).children().hide();
       $(cardId).css("backgroundColor", "white");
       $(this).children().hide();
       $(this).css("backgroundColor", "white");
    }, 1500);
}

or

var self = this;
else {//cards do NOT match
    $(this).css("backgroundColor", "#ff6666");
    $(cardId).css("backgroundColor", "#ff6666");
    setTimeout(function(){
       $(cardId).children().hide();
       $(cardId).css("backgroundColor", "white");
       $(self).children().hide();
       $(self).css("backgroundColor", "white");
    }, 1500);
}

Why is this setTimeout method not working?

1 Answers1