后端返回十几条数据,前端就要弹出十几个弹窗,但每个弹窗都是在上一个弹窗执行倒计时关闭后才弹出来,而不是全部一起弹出,类型与alert弹窗,点击确定才跳出下一个弹窗
弹窗信息压入一个数组中,倒计时结束后依次取信息直到全部取出,模型大概如下,注意修改弹窗代码,这里只是简单设置dvmsg容器的内容,有帮助麻烦点个采纳【本回答右上角】,谢谢~~有其他问题可以继续交流~
<div id="dvmsg"></div>
<script>
var messages = [];//信息队列
function ShowMessage() {
if (messages.length) {//还有信息继续弹出
dvmsg.style.display = 'block';
var item = messages.splice(0, 1);//取第一项
dvmsg.innerHTML = item;
setTimeout(ShowMessage, 2000);//倒计时功能
}
else dvmsg.style.display = 'none';//全部执行完毕隐藏
}
setTimeout(() => {//计时器模拟ajax操作
//注意用concat将返回的新信息压入队列数组中,而不能直接messages=xxxx,这样的话如果队列还有未弹出的信息会被覆盖掉
messages = messages.concat(["message1", "message2", "message3", "message4", "message5"]);
ShowMessage();//启动弹窗操作
}, 1000);
</script>
后端返回给你的数据一般都是集合类型的吧,写一个弹出弹窗的function,传入的参数是弹窗数据对应的key或者index,点击确认和倒计时关闭时,触发function弹出下一个弹窗,我的思路就是这样
第一步,把后台返回的数据用下标为:0,1,2,3,4,5,6,7,8,9,10....这样的保存起来,并且记录下总数
然后写一个函数,该函数里做根据传进来的参数操作弹窗,比如:
var jsonobj = 这里接收后台传回的json格式;// 比如 var jsonobj ='[{"name":"cxh","sex":"man"},{"name":"cxh1","sex":"man1"}]';
var index=0;//默认弹出的内容下标
var t //定时器变量
function tanchuang(){
var name=jsonobj [index].name//获取当前要弹出的信息内容
//接下来做弹窗的处理
if(index<jsonobj.length-1){
index=index+1
}else{
if(t){//定时对象存在
clearInterval(t)
}
}
}
t=setInterval("tanchuang",3000)
弹出是这样的,关闭后才能弹出新的弹窗,改为弹窗窗口列表即可。