如何实现后端返回多少条数据,弹出多少个弹窗

后端返回十几条数据,前端就要弹出十几个弹窗,但每个弹窗都是在上一个弹窗执行倒计时关闭后才弹出来,而不是全部一起弹出,类型与alert弹窗,点击确定才跳出下一个弹窗

弹窗信息压入一个数组中,倒计时结束后依次取信息直到全部取出,模型大概如下,注意修改弹窗代码,这里只是简单设置dvmsg容器的内容,有帮助麻烦点个采纳【本回答右上角】,谢谢~~有其他问题可以继续交流~

img

<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)

弹出是这样的,关闭后才能弹出新的弹窗,改为弹窗窗口列表即可。