原生js實現類似佇列的功能
阿新 • • 發佈：2019-02-14
<!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">
if(queen.length){
setTimeout(function(){
var b = queen.shift();
b.method();
queen.push(b);
}.bind(contentx),contentx.time)
}
}
//第一個元素進佇列
queen.push({
time: 1000,
setAnim(queen, this);//下一個佇列函式在這個函式裡面的time(這裡是1000毫秒)時間之後呼叫
}
});
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>
<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(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毫秒)時間之後呼叫
}
});
//第二個元素進佇列
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去掉