JavaScript 非图片动态 Loading 效果实现与原理详解

实现该功能的核心代码如下：

动态 Loading 效果实现与 this 指向问题

首先定义一个名为 LoadingMsg 的 JavaScript 对象来封装加载逻辑：

 
var Class = {
create: function() {
return function() { this.init.apply(this,arguments); }
} 
} 
var LoadingMsg = Class.create();
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() {
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);
} 
} 

实现过程中的关键点在于处理 setInterval 中的上下文丢失问题。

如果将代码：

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

错误地写成：

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

则在执行 Loading 方法时会报错，提示找不到 this.spanMsg。

这是因为在 setInterval 的第一个参数中，this 指向的是全局 window 对象，而非 LoadingMsg 实例。

以下是该方法的具体应用示例：

 
<body>
<input type="button" value="Start" onclick="javascript:StartLoading();" />
<span id="spanId" style="color:Red"></span>
<br />
<input type="button" value="End" onclick="javascript:EndLoading();" />
<br /><br />
<script type="text/javascript">
var loadingMsgObj = new LoadingMsg("spanId","loading");
function StartLoading() {
loadingMsgObj.Start();
} 
function EndLoading() {
loadingMsgObj.End();
} 
</script>
</body>

对象创建模式对比：Class.create 与简化写法

上述代码中使用的对象创建方式源自 prototype.js 的经典模式。

 
var Class = {
create: function() {
return function() { this.init.apply(this,arguments); }
} 
} 
var LoadingMsg = Class.create();

在调用 Class.create() 时执行了两个操作：一是创建了 LoadingMsg 构造函数，即 var LoadingMsg = function() {}；

二是自动调用 LoadingMsg 的 init 方法，初始化实例中的属性，这类似于 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 传参，如果参数是简单的字符串，可以：

setInterval("DisplayXYZ('xyz')",1000);

如果参数是对象，

则可以写成 setInterval(function(){DisplayXYZ(obj);},1000);

该 LoadingMsg 对象主要应用于 AJAX 场景，用于处理可能耗时较长的请求。在发送请求后调用 loadingMsgObj.Start()，在成功获取响应时调用 loadingMsgObj.End()。