开发者社区> 问答> 正文

js延迟顺序执行的问题

小旋风柴进 2016-03-17 10:29:18 975

现在项目中遇到一个问题。就是在前台页面顺序延迟显示后台发送的数据。
比如前台是一个表格,点击前台按钮后,一次获得table上该显示的所有随机序号。
目前的问题不能让这些选择的序号顺序延迟显示。
这个问题类似于在表格中随机点名。
代码不完整:

<table>
   <tr><td>11</td><td>12</td><td>13</td><td>14</td></tr>
   <tr><td>21</td><td>22</td><td>23</td><td>24</td></tr>
   <tr><td>31</td><td>32</td><td>33</td><td>34</td></tr>
   <tr><td>41</td><td>42</td><td>43</td><td>44</td></tr>
</table>
<input type="button" value="顺序延迟加载" id="btnRun" />
<script>
   $(function(){
       $("#btnRun").click(function(){
           // rndArray假如是产生的一个瞬间顺序数组,用来控制表格的td变色
           var rndArray=[3,7,11,1,12,15];
           for(var i=0;i<rndArray.length;i++){
               setTimeout(function(){
                   $("table td").eq(i).addClass("test1").siblings().removeClass("test1");
               },1000);
           }
       })
   });
</script>

今天查阅了一下js是单线程执行的,setTimeout("code()",delay)是在delay后将code插入到代码中。
因此这样肯定无法实现我要的功能。不知道有什么好方法可以实现这个功能,
以前在学习视频的时候看到过这个表格随机点名的效果。
求大神指点该怎么弄。

JavaScript
分享到
取消 提交回答
全部回答(1)
  • 小旋风柴进
    2019-07-17 19:04:41

    本质应该是循环遍历发生了js的一个bug。解决办法看下面的例子。

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
        <HEAD>
            <TITLE> 简单实验 </TITLE>
            <META NAME="Generator" CONTENT="EditPlus">
                <META NAME="Author" CONTENT="">
                    <META NAME="Keywords" CONTENT="">
                        <META NAME="Description" CONTENT="">
                            <script type="text/javascript" src="jquery.js"></script>
        </HEAD>
    
        <BODY>
    
            页面报错的话,修改js路径<br/>
            <table border="1">
                <tr>
                    <td>11</td>
                    <td>12</td>
                    <td>13</td>
                    <td>14</td>
                </tr>
                <tr>
                    <td>21</td>
                    <td>22</td>
                    <td>23</td>
                    <td>24</td>
                </tr>
                <tr>
                    <td>31</td>
                    <td>32</td>
                    <td>33</td>
                    <td>34</td>
                </tr>
                <tr>
                    <td>41</td>
                    <td>42</td>
                    <td>43</td>
                    <td>44</td>
                </tr>
            </table>
            <input type="button" value="顺序延迟加载" id="btnRun" />
            <script>
    
    
               $(function(){
                   $("#btnRun").click(function(){
                       // rndArray ,从0开始, 第0个为red,第5个为green,第10个为tomato,地15个为hotpink
                       var rndArray=[0,5,10,15];
                       var colorArray=['red','green','tomato','hotpink'];
                       $("#btnRun").attr('disabled',true);
                       for(var i=0;i<rndArray.length;i++){
                           setTimeout(function(i2){
                                var _i = rndArray[i2];
                                return function(){
                                   $("table td").eq(_i).css('background-color', colorArray[i2]);
                                };
                           }(i),1000);
                       }
                   })
               });
    
            </script>
        </BODY>
    </HTML>
    0 0

集结各类场景实战经验,助你开发运维畅行无忧

推荐文章
相似问题
推荐课程