js循环中延迟几秒执行下一段代码
原因:由于js代码执行策略是几段代码可以同时执行,而不是先等上一句执行完再执行下一句。
原理:假设有两段代码需要先走执行,先执行代码片段1再执行代码片段2。那么代码2必须在代码1中执行。
项目场景:ajax获得了多条提示信息,需要页面逐一自定义弹框显示出来,这个时候如果使用for循环并且在for循环中提示,那么只要第一条提示信息还没弹出完js就会跑下一次循环,导致几条提示信息一起弹出,影响效果。
如:for(i=0;i<data.length;i++){
alterTip("提示信息");//此方法不是alert,而是通过在在页面添加元素并做出弹框效果
}
原理:假设有两段代码需要先走执行,先执行代码片段1再执行代码片段2。那么代码2必须在代码1中执行。
项目场景:ajax获得了多条提示信息,需要页面逐一自定义弹框显示出来,这个时候如果使用for循环并且在for循环中提示,那么只要第一条提示信息还没弹出完js就会跑下一次循环,导致几条提示信息一起弹出,影响效果。
如:for(i=0;i<data.length;i++){
alterTip("提示信息");//此方法不是alert,而是通过在在页面添加元素并做出弹框效果
}
这个时候几个alterTip一起弹出。
解决方法: $(function(){ getData() }); var tipsTimes = 0; var tipslength = 0; var result; var tips; function getData(){ $.ajax({ url:/integral/getData.do, success:function(data){ if(data.hasData==true){ tips = eval(data.tips); tipslength = tips.length; result = tips[0].split(","); alterTip(result[1],result[0]);//触发函数 } } }); } function alterTip(data1,data2){ $(body).append(<div class="alertlayer"><section class="content123">++data1+<br/>+data2+</section></div>); tipsTimes += 1; //记录循环次数 if(tipsTimes == tipslength){ return; }else{ var result2 = tips[tipsTimes]; setTimeout(function(){ alterTip(result2.split(",")[1],result2.split(",")[0])}, 1000);//在此处延迟1秒再执行下一段代码块(调自己) } }