JQuery code getting executed before it reaches there

Question

I am trying to highlight each menu items after 1 sec gap. It works fine, but I am facing a problem for the last menu item. I added $(strtemp).removeClass("change"); for clearing the last menu item, but that line is getting executed before the setInterval function gets executed. I am not able to understand why?

my.js

$(document).ready(function(){
    $(".parent").click(function(){
        str = "li:nth-child(";
        strtemp="";
        i=1;
        var refreshID=setInterval(function(){
            str1=str.concat(i);
            str1=str1.concat(")");
            str2=str.concat(i-1);
            str2=str2.concat(")");
            if($(str2).hasClass("change")){
                $(str2).removeClass("change");
            }
            $(str1).addClass( "change" );
            if(i==10){ 
                strtemp=str1;clearInterval(refreshID);
            }
            i++;
        }, 1000);
        $(strtemp).removeClass("change");
    });
});

index.html

<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
        <script type="text/Javascript" src="jquery.js"></script>
        <script src="my.js"></script>
        <title>My Jquery</title>
    </head>
    <body>
        <div class="parent">
            <ol>
                <li>AAAAA</li>
                <li>AAAAA</li>
                <li>AAAAA</li>
                <li>AAAAA</li>
                <li>AAAAA</li>
                <li>AAAAA</li>
                <li>AAAAA</li>
                <li>AAAAA</li>
                <li>AAAAA</li>
                <li>AAAAA</li>
            </ol>
        </div>
    </body>
</html>

stylesheet.css

.parent{
    background-color: yellow;
    height:200px;
    width:400px;    
}

.change{
    border: 1px dotted green;
    background-color: red;
    height:15px;
    width:100px;
}

This is expected behaviour, not sure what you are expecting. If you want this piece of code to be called once interval callback is fired, then set it inside interval callback. Or used named function and call it before the first interval callback is fired — A. Wolff, Aug 22 '15 at 10:50
If you want last item class removal - increase counter to 11? However, maybe there could be simpler solution for desired behavior... — sinisake, Aug 22 '15 at 10:53

ryachza · Answer 1 · 2015-08-22T10:59:02.213

The $(strtemp).removeClass call is outside the callback function passed to setInterval. The code inside the function will execute each tick, everything outside will be executed sequentially when the click handler fires.

Edit

Are you looking for something like: http://jsfiddle.net/qprjqy2n/ ?

$(document).ready(function(){
    $(".parent").click(function(){
        str = "li:nth-child(";
        strtemp="";
        i=1;
        var refreshID=setInterval(function(){
            str1=str.concat(i);
            str1=str1.concat(")");
            str2=str.concat(i-1);
            str2=str2.concat(")");
            if($(str2).hasClass("change")){
                $(str2).removeClass("change");
            }
            $(str1).addClass( "change" );
            if(i==11){ 
                strtemp=str1;clearInterval(refreshID);
                $(strtemp).removeClass("change");
            }
            i++;
        }, 100);
    });
});

I would be interested to know what your overall goal is as there would almost certainly be a more straightforward approach.

score 1 · Answer 2 · answered Aug 22 '15 at 11:08

You can do with also as:

function atlast(strtemp)
{
    $(strtemp).removeClass("change");
}


$(document).ready(function(){
    $(".parent").click(function(){
        str = "li:nth-child(";
        strtemp="";
        i=1;
        var refreshID=setInterval(function(){
            str1=str.concat(i);
            str1=str1.concat(")");
            str2=str.concat(i-1);
            str2=str2.concat(")");
            if($(str2).hasClass("change")){
                $(str2).removeClass("change");
            }
            $(str1).addClass( "change" );
            if(i==10){ 
                strtemp=str1;clearInterval(refreshID);
                atlast(strtemp);
            }
            i++;
        }, 1000);

    });
});

sinisake · Answer 3 · 2015-08-22T11:40:35.357

As a suggestion, much easier approach:

    $(".parent").click(function() {
     lis = $(this).find('li');

     i = -1;

     inter = setInterval(function() {
       if (i < lis.length - 1) {
         i++;
         $(lis[i - 1]).removeClass('change');
         $(lis[i]).addClass('change');
         console.log($(lis[i]).text() + '_________________' + i);
       } else {

         console.log('end');
         $(lis[i]).removeClass('change');
         clearInterval(inter);
       }

     }, 1000);

   });

without building of css selectors, and corrected timer, and fiddle link... http://jsfiddle.net/Lb6v334a/1/

Prasad Parab · Answer 4 · 2015-08-22T17:51:23.727

You can also do it as below

 var index=1; 
  var curretInterval;
$(".parent").click(function(){
    clearInterval(curretInterval);
    curretInterval=setInterval(function(){
            $("ol li:nth-child("+(index-1)+")").removeClass("change");
            $("ol li:nth-child("+index+")").addClass("change");
            index=index+1;
            index=index>11?1:index;
        },1000);

 });

JSFiddle for the same is http://jsfiddle.net/prasadFiddle/405cnu39/23/

and on next clicks if you want to start highlighting from begining then http://jsfiddle.net/prasadFiddle/405cnu39/24/

If you want to run this loop only once then http://jsfiddle.net/prasadFiddle/405cnu39/25/

score 0 · Answer 5 · edited May 23 '17 at 12:22

You can use nested setTimeout functions, the answer below is inspired from this SO post ..

$(document).ready(function(){
$(".parent").click(function(){
    items = $(this).find('li');
    i = -1;
    len = items.length; 
    function animation_loop() {
            $(items[i]).addClass('change');
            setTimeout(function(){ 
            $(items[i]).removeClass('change');
            }, 100  );
        setTimeout(function() { 
            if (i < len) 
        {
            i++;
            animation_loop(); 

        } 

    }, 100);
    };
    animation_loop();
  });
});

Demo

JQuery code getting executed before it reaches there

5 Answers5