Chinaunix首页 | 论坛 | 博客
  • 博客访问: 463276
  • 博文数量: 226
  • 博客积分: 0
  • 博客等级: 民兵
  • 技术积分: 2111
  • 用 户 组: 普通用户
  • 注册时间: 2014-06-20 09:02
个人简介

web web web

文章分类

全部博文(226)

文章存档

2020年(2)

2019年(1)

2018年(3)

2017年(26)

2016年(57)

2015年(60)

2014年(77)

我的朋友

分类: Web开发

2014-11-05 09:25:33

功能说明:譬如在按某个button时,显示消息"Loading”,然后每隔一秒后后面加上".",至一定数量的"."时如:"Loading...",再重置此消息为"Loading",继续动态显示,直至按钮事件处理完成。







   
       
              
            

       

   

实现该功能的js对象LoadingMsg;

注意:

如果把

var callObj = this;

this.intervalID = setInterval(function() { callObj.Loading(); }, this.timespan);

写成:

this.intervalID = setInterval(this.Loading, this.timespan);

在执行Loading方法时则会报找不到this.spanMsg的错误。

因为在setInterval里的第一个参数里的this是windows对象,而不是LoadingMsg对象。windows.setInterval。

应用该方法:

   
   
    
    
   

来源于prototype.js里经典创建Js对象的
var Class = {
            create:
function() { return function() { this.init.apply(this,arguments); }
            }
        }
var LoadingMsg = Class.create();       
function EndLoading() {
    loadingMsgObj.End();
}

在Class.create()的时候做了2件事,1个是创建了LoadingMsg的对象,即var LoadingMsg = function() {};

另外一件事就是调用LoadingMsg的init方法,初始化LoadingMsg里的静态私有变量,相当于c#里的构造函数作用。

如果你喜欢简单的话,也可以改写LoadingMsg对象:

代码

var LoadingMsg = function() { };
        LoadingMsg.prototype = {
            init: function(spanId, spanMsg) {
                this.intervalID = -10000;
                this.spanId = spanId;
                this.spanMsg = spanMsg;
                this.timespan = 1000;
                this.pointNum = 3;
                this.initPointMsg = "...";
            },
            Loading: function() {
                var maxLength = this.spanMsg.length + this.pointNum;
                var currentSpanMsg = document.getElementById(this.spanId).innerHTML;
                if (currentSpanMsg.length < maxLength) {
                    document.getElementById(this.spanId).innerHTML += ".";
                }
                else {
                    document.getElementById(this.spanId).innerHTML = this.spanMsg;
                }
            },
            Start: function(spanId, spanMsg) {
                this.init(spanId, spanMsg);
                document.getElementById(this.spanId).innerHTML = this.spanMsg + this.initPointMsg;
                var callObj = this;
                this.intervalID = setInterval(function() { callObj.Loading(); }, this.timespan); 
            },
            End: function() {
                document.getElementById(this.spanId).innerHTML = "";
                clearInterval(this.intervalID);
            }
        }
    所不同的是把init的过程调到Start时执行,因此调用的时候也就变成了 
var loadingMsgObj = new LoadingMsg(); function StartLoading() {
            loadingMsgObj.Start(
"spanId", "loading");
}

    从面向对象的习惯上来说,我个人还是倾向第一种写法,在实例化对象的时候即传入参数,而不是执行对象方法的时候传入参数。另外关于setInterval方法传参数时,如果参数是简单的string,可以setInterval("DisplayXYZ('xyz')",1000);如果参数是对象,则可以setInterval(function(){DisplayXYZ(obj);},1000);LoadingMsg还是主要用在Ajax中,应用于执行时间可能较长的场景,在发送请求后loadingMsgObj.Start(),在成功获取响应时loadingMsgObj.End()。

阅读(363) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~