Javascript JQuery代码在到达之前执行_Javascript_Jquery_Html_Settimeout

Javascript JQuery代码在到达之前执行

javascript jquery html

Javascript JQuery代码在到达之前执行,javascript,jquery,html,settimeout,Javascript,Jquery,Html,Settimeout,我试图在间隔1秒后突出显示每个菜单项。它工作正常，但最后一个菜单项有问题。我补充说 $（strtemp）.removeClass（“更改”）用于清除最后一个菜单项，但该行在执行setInterval函数之前执行。我不明白为什么 my.js $(document).ready(function(){ $(".parent").click(function(){ str = "li:nth-child("; strtemp=""; i=1;

我试图在间隔1秒后突出显示每个菜单项。它工作正常，但最后一个菜单项有问题。我补充说

$（strtemp）.removeClass（“更改”）

用于清除最后一个菜单项，但该行在执行

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

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

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

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>

$（strtemp）.removeClass调用在传递给setInterval
的回调函数之外。函数内部的代码将执行每个勾号，当单击处理程序触发时，外部的所有内容都将按顺序执行
编辑
你在找像：
我很想知道您的总体目标是什么，因为几乎可以肯定会有一种更直接的方法。
您也可以使用以下方法：
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);

    });
});

建议采用更简单的方法：
    $(".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);

   });

$（“.parent”）。单击（函数（）{
lis=$（this.find（'li'）；
i=-1；
inter=setInterval（函数（）{
如果（i

没有css选择器的建设，并纠正计时器，小提琴链接
 您也可以按以下方式执行
 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);

 });

相同的JSFIDLE是

在下一次点击时，如果你想从一开始就突出显示
如果您只想运行此循环一次，那么可以使用嵌套的setTimeout
函数，下面的答案来自本文
$（文档）.ready（函数（）{
$（“.parent”）。单击（函数（）{
items=$（this.find（'li'）；
i=-1；
len=项目长度；
函数动画_循环（）{
$（items[i]）.addClass（“变更”）；
setTimeout（函数（）{
$（项目[i]）。removeClass（“变更”）；
}, 100  );
setTimeout（函数（）{
如果（i

这是预期的行为，不确定您预期的是什么。如果希望在触发间隔回调后调用这段代码，请将其设置在间隔回调内。或者使用命名函数，并在第一次间隔回调之前调用它。如果要删除最后一个项类，请将计数器增加到11？然而，对于期望的行为，可能有更简单的解决方案。。。
 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);

 });

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