JQuery 代码在到达那里之前被执行答案

【问题标题】：JQuery code getting executed before it reaches thereJQuery 代码在到达那里之前被执行
【发布时间】：2015-11-16 06:35:14
【问题描述】：

我试图在间隔 1 秒后突出显示每个菜单项。它工作正常，但我面临最后一个菜单项的问题。我添加了 $(strtemp).removeClass("change"); 用于清除最后一个菜单项，但该行在 setInterval 函数执行之前执行。我无法理解为什么？

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;
}

【问题讨论】：

这是预期行为，不确定您的预期。如果您希望在触发间隔回调后调用这段代码，则将其设置在间隔回调中。或者使用命名函数并在第一个间隔回调被触发之前调用它
如果你想删除最后一个项目类 - 将计数器增加到 11？但是，对于所需的行为，也许有更简单的解决方案......

标签： javascript jquery html settimeout

【解决方案1】：

$(strtemp).removeClass 调用在传递给setInterval 的回调函数之外。函数内部的代码会执行每一个tick，外部的所有代码都会在click handler触发时依次执行。

编辑

您是否在寻找类似：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);
    });
});

我很想知道您的总体目标是什么，因为几乎肯定会有更直接的方法。

【讨论】：

【解决方案2】：

你也可以这样做：

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);

    });
});

【讨论】：

【解决方案3】：

作为一个建议，更简单的方法：

    $(".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);

   });

无需构建 css 选择器、更正计时器和小提琴链接...http://jsfiddle.net/Lb6v334a/1/

【讨论】：

【解决方案4】：

你也可以这样做

 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 同样是 http://jsfiddle.net/prasadFiddle/405cnu39/23/

如果您想从头开始突出显示，则在下一次点击时，然后http://jsfiddle.net/prasadFiddle/405cnu39/24/

如果你只想运行这个循环一次，那么http://jsfiddle.net/prasadFiddle/405cnu39/25/

【讨论】：

【解决方案5】：

您可以使用嵌套的setTimeout 函数，下面的答案灵感来自此SO 帖子..

$(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

【讨论】：