js循环中延迟几秒执行下一段代码

本文探讨了在JavaScript环境中,使用for循环处理并发任务时出现的问题,特别是当使用AJAX获取多条提示信息并尝试在页面上逐一显示时,由于JS的执行策略导致提示信息同时弹出的情况。为了解决这个问题,文章提出了使用$(function(){}

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

原因:由于js代码执行策略是几段代码可以同时执行,而不是先等上一句执行完再执行下一句。
原理:假设有两段代码需要先走执行,先执行代码片段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秒再执行下一段代码块(调自己)
}
}


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值