当前位置:首页 > 前端 > js篇-异步状态监控

js篇-异步状态监控

一、背景

在做报表页面的时候,页面上有很多的异步加载,而设计的loading是个全局的,一个页面就有一个。

控制loading什么时候出现,什么时候消失,要实时的知道页面上异步加载的东西是否执行完毕,只有所有的异步都加载完,loading才能停止。

javascript

并且,如果用户操作了页面,某个局部又要开始加载,loading要被通知到,执行loading效果。

问题的难点有两个:

1.怎么知道所有的异步都加载完闭了呢?

2.如何通知loading?

二、思路

设计一个外部状态map,异步执行完毕,就修改外部变量的值。开一个计时器,不断的这个map,如果全部加载完毕,就停止loading。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 状态集合
  var statusMap = {
      "异步1": false,
      "异步2": false
      // ...
  };
 
 // 计时器不断检查状态
 setInterval(function () {
     // 检查statusMap
     if (isReady(statusMap)) {
         // show loading
     } else {
         // hide loading
     }
 }, 1000);
 
 //异步
 $.ajax({
     //...
     success: function () {
         statusMap["异步1"] = true;
     }
 });

这个方案虽然能解决问题,但是太不够优雅,呵呵呵呵……

思路二

使用promise或者jQuery的deferred(@上位者的怜悯 提供的建议)。

1
2
3
4
5
$.when(异步1,异步2).done(function(){
    // show loading
}).fail(function(){
    // hide loading
});

这个方案有个弊端,一旦异步加载完毕,不能修改promise的状态了,因此不适合这个场景。

思路三

自己造轮子基于事件监听的,一个状态改变,就扫一遍所有监听的对象,最后再根据用状态,回调对应的函数

三、思路三实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
(function (win) {
    var watch = function () {
        var that = this;
        // arr
        if (arguments.length == 1 && Object.prototype.toString.call(arguments[0]) === "[object Array]") {
            that.watchArr = arguments[0];
        } else {
            that.watchArr = Array.prototype.slice.call(arguments);
        }
        that.watchArr.forEach(function (fairy) {
            fairy.watch = that;
        });
        that.isReady = true;
        return that;
    };
    watch.prototype = {
        ready: function (callback) {
            this.readyHandler = callback;
            this.check();
            return this;
        },
        unready: function (callback) {
            this.unReadyHandler = callback;
            this.check();
            return this;
        },
        add: function (fairy, check) {
            this.watchArr.push(fairy);
            if (check === undefined || check === true) {
                this.check();
            }
            return this;
        },
        check: function () {
            var nowIsReady = this.watchArr.every(function (fairy) {
                return fairy.isReady;
            });
            if (nowIsReady != this.isReady) {
                if (nowIsReady) {
                    if (this.readyHandler) {
                        this.readyHandler.call();
                        this.isReady = true;
                    }
                } else {
                    if (this.unReadyHandler) {
                        this.unReadyHandler.call();
                        this.isReady = false;
                    }
                }
            }
        },
        setIsReadyById: function (id, isReady, check) {
            var index = this.watchArr.indexOf(function (fairy) {
                fairy.id = id;
            });
            this.watchArr[index].isReady = isReady;
            if (check === undefined || check === true) {
                this.check();
            }
        },
        setIsReadyAll: function (isReady, check) {
            this.watchArr.forEach(function (fairy) {
                fairy.isReady = isReady;
            });
            if (check === undefined || check === true) {
                this.check();
            }
        }
    };
 
    var fairy = function (isReady) {
        this.id = new Date().getTime();
        this.isReady = isReady || false;
    };
    fairy.prototype = {
        toReady: function () {
            this.isReady = true;
            this.watch.check();
        },
        toUnReady: function () {
            this.isReady = false;
            this.watch.check();
        }
    };
 
    win.Watch = watch;
    win.Fairy = fairy;
})(window);

javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 用例
var loader = new Loader();
var listFairy = new Fairy();
var chartFairy = new Fairy();
var watch = new Watch(listFairy, chartFairy);
watch.ready(function () {
    loader.stop();
}).unready(function () {
    loader.start();
});
 
//异步
$.ajax({
    //...
    success: function () {
        listFairy.toReady();
    }
});

总结

纳尼,说好的事件呢,哪里去了。

好吧,吐槽点来了,实现的过程中,发现其实没必要用事件。

实现到最后,发现它其实就是一个变相的思路一。

  • << iOS多线程简学习
  • C# new关键字详解 >>
  • 作者:
    除非注明,本文原创:知道91,欢迎转载!转载请以链接形式注明本文地址,谢谢。
    原文链接:http://www.zhidao91.com/js-asyncjiankong/

    相关文章 近期热评 最新文章

    • 怎样在WordPress中安装Google Analytics
      就算你积累了多年网站建设的经验,你都不可能一开始就建一个外观,速度,功能以及转化都很完美的网站。你能做的并且也是各个站长正在做的,无非是通过不断的监测来改进...
    • 怎样在WordPress中安装Google Analytics
      就算你积累了多年网站建设的经验,你都不可能一开始就建一个外观,速度,功能以及转化都很完美的网站。你能做的并且也是各个站长正在做的,无非是通过不断的监测来改进...
    • oracle数据库相关操作注意事项
      修改Oracle SGA(共享内存) 很多网站说修改Oracle的内存通过命令 如果你这么做了,那么恭喜你,你的Oracle数据库无法启动了。如果你已经这么做了,恢复Oracle启动的方...
    • 使用微信JDK实现微信接口签名验证
      要使用微信的接口必须在绑定的域名下测试;签名必须先向微信请求到access_token,然后用access_token再去请求jsapi_ticket,最后用jsapi_ticket和相关的参数按照ASCII码...
    • ABP开发指南系列教程(2) – 多层架构...
      为了减少复杂性和提高代码的可重用性,采用分层架构是一种被广泛接受的技术。为了实现分层的体系结构,ABP遵循DDD(领域驱动设计)的原则,将工程分为四个层: 展现层(...
    • ABP开发指南系列教程(1) – 入...
      ABP是“ASP.NET Boilerplate Project (ASP.NET样板项目)”的简称。 ASP.NET Boilerplate是一个用最佳实践和流行技术开发现代WEB应用程序的新起点,它旨在成为一个通用的WE...
    • Windows下 JIRA + Agile + Mysql 破解...
      本文讲述了Windows下 JIRA + Agile + Mysql 破解安装示例教程