原生js实现类似队列的功能_js 有没有类似队列的-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_28020627/article/details/79112609

<!DOCTYPE html>
<html>
<head>
<title>js队列测试</title>
<meta name="viewport" content="width=device-width,initial-scale=no,maximum-scale=1.0,minimum-scale=1.0,
user-scalable=no">
</head>
<body>

<script type="text/javascript">

var queen = [];

//队列实现主函数

function setAnim(queen = [], contentx){

if(!contentx)context = window;
if(queen.length){
setTimeout(function(){
var b = queen.shift();
b.method();
queen.push(b);
}.bind(contentx),contentx.time)
}
}

//第一个元素进队列
queen.push({
time: 1000,

method: function(){

//这里可以有更多的逻辑，比如调用一个css动画函数,1000表示1秒钟之后自动调用下一个函数,比如css动画是5s中，我们这里可以设置成5000,这样就可以实现丰富性的动画效果,下面也类同

console.log("hello1")
setAnim(queen, this);//下一个队列函数在这个函数里面的time(这里是1000毫秒)时间之后调用
}
});

//第二个元素进队列

queen.push({
time: 2000,
method: function(){
console.log("hello2");
setAnim(queen, this);
}

});

//第三个元素进队列
queen.push({
time: 3000,
method: function(){
console.log("hello3")
setAnim(queen, this);
}
});

//第四个元素进队列
queen.push({
time: 4000,
method: function(){
console.log("hello4");
setAnim(queen, this);
}
});

//初始化
function init(){
var a = queen.shift();
setTimeout(function(){
a.method();
queen.push(a);
},1000);
}

init();

</script>
</body>

</html>

结果: 在1s之后先打印出hello1,打出hello1 2s之后打出hello2,以此类推，可以不断循环，如果不想循环调用回调函数，可以

把push去掉