js 链式延迟执行DOME

  这样的形式执行:

  

复制代码 代码如下:

  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(); //跳到第一条重新执行,这句拿掉就只执行一次

  

复制代码 代码如下:

  <!doctype html>

  <html>

  <head>

  <title>异步执行</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>