jQuery - setTimeout does not work

Question

There is my script: https://jsfiddle.net/hcsofjaa/1/ I want to change color of these cells every 2000ms one by one, but It seems the setTimeout function does not work properly. Does anybody know, where is the problem?

$("#button").click(function(){
for (var i = $("span").length; i > 0; i--) {

    setTimeout(function(){
        $("span:nth-child("+i+")").css("background-color","blue");
    }, 2000);

}

`i` isn't what you think it is when the timeout fires. The linked question's answers explain why and how to fix it. — T.J. Crowder, Oct 17 '16 at 17:10
Definitely not setTimeout's problem. Either you're not looping correctly or your css application isn't correct. — kemicofa ghost, Oct 17 '16 at 17:10
@T.J.Crowder: As per my understanding question is not duplicate. It looks like he is a learner, not able to achieve the functionality he is looking for. Can you double check? — Jayamurugan, Oct 17 '16 at 17:27

Jayamurugan · Accepted Answer · 2016-10-17T17:23:49.500

0

1) $(function) is important - bind click event to element after it rendered.

2) 2000 * i : button colors change in the gap of 2000

$(function(){
  $("#button").click(function(){
  $("span").each(function(i){
   var e = this;
   setTimeout(function(){
     $(e).css("background-color","blue");
   }, 2000 * i);
   });     
   });
});

edited Oct 17 '16 at 17:23

answered Oct 17 '16 at 17:16

Jayamurugan

1,757
2
14
34

Peoples putting down vote. If they given reason in comments. It will correct my mistakes. – Jayamurugan Oct 17 '16 at 17:29
Thank you very much. I got it now. – UsopleskCz Oct 17 '16 at 17:32
@UsopleskCz: Welcome:) – Jayamurugan Oct 17 '16 at 17:32

jQuery - setTimeout does not work

1 Answers1