js 鏈式延遲執(zhí)行DOME
更新時間：2012年01月04日 17:33:22 作者：
js 鏈式延遲執(zhí)行DOME，需要的朋友可以參考下。
這樣的形式執(zhí)行：
d.wait(3000).run(function(m){ //等待3秒
alert('從前有座山');
}).wait(1000).run(function(m){ //等待1秒
alert('山里有座廟');
}).wait(2000).run(function(m){ //等待2秒
alert('廟里有一個老和尚給一個小和尚講故事');
}).wait(3000).run(function(m){ //等待3秒
alert('講的故事是:');
}).goStart(); //跳到第一條重新執(zhí)行，這句拿掉就只執(zhí)行一次
<!doctype html>
<html>
<head>
<title>異步執(zhí)行</title>
</head>
<body>
<script type="text/javascript">
function Delay(){
this.funList= [];
this.index = 0;
this.re = null;
this.isloop = false;
};
Delay.prototype = {
wait:function(m){
if(this.funList[this.index] && typeof this.funList[this.index].fun != 'function'){
m += this.funList[this.index].m;
}
this.funList[this.index] = {m:m,fun:null};
return this;
},
run:function(fun){
if(typeof this.funList[this.index].fun != 'function'){
this.funList[this.index].fun = fun;
this.index++;
}else{
this.index++;
this.funList[this.index] = {'m':0,'fun':fun};
}
this.start();
return this;
},
start:function(){
var self = this;
if(this.re) return;
var setOutrun = function(funList,index){
if(funList[index] == undefined){
clearTimeout(self.re);
return false;
}
var m = funList[index].m,
fun = funList[index].fun;
typeof fun == 'function' || (fun = function(){});
self.re = setTimeout(function(){
if(fun(index) === false)return false;
if(self.isloop){
index = -1;
self.isloop = false;
}
setOutrun(funList,++index);
},m);
}
setOutrun(this.funList,0);
},
stop:function(){
return clearTimeout(this.re);
},
goStart:function(){
var self = this,
fun = function(){
self.isloop = true;
};
if(this.funList[this.index] && typeof this.funList[this.index].fun != 'function'){
this.funList[this.index].fun = fun;
this.index++;
}else{
this.funList[this.index] = {'m':0,'fun':fun};
}
this.start();
}
};
var d = new Delay();
d.wait(3000).run(function(m){
alert('從前有座山');
}).wait(2000).run(function(m){
alert('山里有座廟');
}).wait(2000).run(function(m){
alert('廟里有一個老和尚給一個小和尚講故事');
}).wait(2000).run(function(m){
alert('講的故事是:');
}).goStart();
</script></body>
</html>
復制代碼 代碼如下:
d.wait(3000).run(function(m){ //等待3秒
alert('從前有座山');
}).wait(1000).run(function(m){ //等待1秒
alert('山里有座廟');
}).wait(2000).run(function(m){ //等待2秒
alert('廟里有一個老和尚給一個小和尚講故事');
}).wait(3000).run(function(m){ //等待3秒
alert('講的故事是:');
}).goStart(); //跳到第一條重新執(zhí)行，這句拿掉就只執(zhí)行一次
復制代碼 代碼如下:
<!doctype html>
<html>
<head>
<title>異步執(zhí)行</title>
</head>
<body>
<script type="text/javascript">
function Delay(){
this.funList= [];
this.index = 0;
this.re = null;
this.isloop = false;
};
Delay.prototype = {
wait:function(m){
if(this.funList[this.index] && typeof this.funList[this.index].fun != 'function'){
m += this.funList[this.index].m;
}
this.funList[this.index] = {m:m,fun:null};
return this;
},
run:function(fun){
if(typeof this.funList[this.index].fun != 'function'){
this.funList[this.index].fun = fun;
this.index++;
}else{
this.index++;
this.funList[this.index] = {'m':0,'fun':fun};
}
this.start();
return this;
},
start:function(){
var self = this;
if(this.re) return;
var setOutrun = function(funList,index){
if(funList[index] == undefined){
clearTimeout(self.re);
return false;
}
var m = funList[index].m,
fun = funList[index].fun;
typeof fun == 'function' || (fun = function(){});
self.re = setTimeout(function(){
if(fun(index) === false)return false;
if(self.isloop){
index = -1;
self.isloop = false;
}
setOutrun(funList,++index);
},m);
}
setOutrun(this.funList,0);
},
stop:function(){
return clearTimeout(this.re);
},
goStart:function(){
var self = this,
fun = function(){
self.isloop = true;
};
if(this.funList[this.index] && typeof this.funList[this.index].fun != 'function'){
this.funList[this.index].fun = fun;
this.index++;
}else{
this.funList[this.index] = {'m':0,'fun':fun};
}
this.start();
}
};
var d = new Delay();
d.wait(3000).run(function(m){
alert('從前有座山');
}).wait(2000).run(function(m){
alert('山里有座廟');
}).wait(2000).run(function(m){
alert('廟里有一個老和尚給一個小和尚講故事');
}).wait(2000).run(function(m){
alert('講的故事是:');
}).goStart();
</script></body>
</html>
相關文章
JS獲取CSS樣式（style/getComputedStyle/currentStyle）
這篇文章主要為大家介紹了JS獲取CSS樣式的方法，介紹了CSS樣式的三種分類情況，對獲取樣式做一個簡單的封裝，感興趣的小伙伴們可以參考一下2016-01-01
這篇文章主要介紹了Promise掃盲貼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-06-06
微信小程序報錯: thirdScriptError的錯誤問題
這篇文章主要介紹了微信小程序報錯: thirdScriptError,本文給大家分享解決方法，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-06-06
這篇文章主要介紹了angular-tree-component的使用詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
所見即所得的富文本編輯器bootstrap-wysiwyg使用方法詳解
這篇文章主要為大家分享一款所見即所得的富文本編輯器bootstrap-wysiwyg，并詳細告訴大家文本編輯器bootstrap-wysiwyg的使用方法，感興趣的小伙伴們可以參考一下2016-05-05
微信小程序js文件改變參數(shù)并在視圖上及時更新【推薦】
這篇文章主要介紹了微信小程序js文件改變參數(shù)并在視圖上及時更新的實現(xiàn)代碼，本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友參考下吧2018-06-06
這篇文章主要介紹了Typescript中函數(shù)類型,主要包括常見寫法、可選參數(shù)，默認參數(shù)及剩余參數(shù)，本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-01-01
window.addEventListener是JavaScript中用于添加事件監(jiān)聽器的方法,允許在發(fā)生特定事件時執(zhí)行函數(shù),本文給大家介紹js?window.addEventListener?是什么,感興趣的朋友一起看看吧2024-09-09
javascript和jQuery中的AJAX技術詳解【包含AJAX各種跨域技術】
這篇文章主要介紹了javascript和jQuery中的AJAX技術,結合實例形式分析了javascript與jQuery中ajax的實現(xiàn)方法以及AJAX各種跨域技術的原理與操作技巧,需要的朋友可以參考下2016-12-12
本文主要分享了基于js實現(xiàn)的輪播效果的實例代碼，具有一定的參考價值，下面跟著小編一起來看下吧2016-12-12