js延迟顺序执行的问题
现在项目中遇到一个问题。就是在前台页面顺序延迟显示后台发送的数据。
比如前台是一个表格，点击前台按钮后，一次获得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插入到代码中。
因此这样肯定无法实现我要的功能。不知道有什么好方法可以实现这个功能，
以前在学习视频的时候看到过这个表格随机点名的效果。
求大神指点该怎么弄。
展开
收起
1
条回答
写回答
写回答
-
本质应该是循环遍历发生了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>2019-07-17 19:04:41赞同 展开评论 打赏
问答分类：
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
相关问答
问答排行榜
最热
最新
推荐问答
