js 链式延迟执行 DOME,需要的朋友可以参考下。
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这样的形式执行:
- 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>
来源: