您的位置：首页 > Web前端 > JavaScript

原生js实现类似队列的功能

2018-01-20 10:38 656 查看

<!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去掉

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： js

相关文章推荐

新的分享

章节导航