The code is as follows:
First to implement the function of the JS object loadingmsg:
Copy Code code as follows:
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);
}
}
Key points:
If you put
Copy Code code as follows:
var callobj = this;
This.intervalid = setinterval (function () {callobj.loading ();}, This.timespan);
Written:
Copy Code code as follows:
This.intervalid = SetInterval (this. Loading, This.timespan);
A this.spanmsg error is reported when the loading method is executed.
Because this is the Windows object, not the Loadingmsg object, in the first argument in SetInterval. Windows.setinterval.
Apply this method:
Copy Code code as follows:
<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>
From the Prototype.js Classic to create JS objects
Copy Code code as follows:
var Class = {
Create:function () {
return function () {this.init.apply (this,arguments);}
}
}
var loadingmsg = Class.create ();
At the time of Class.create () 2 things were done, one was to create the Loadingmsg object, that is, var loadingmsg = function () {};
Another thing is to invoke the Loadingmsg init method, initializing the static private variable in the loadingmsg, which is equivalent to the constructor function in C #.
If you think this is a very strong force, if you prefer simple and plain girls, you can also rewrite the Loadingmsg object:
Copy Code code as follows:
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);
}
}
The difference is that the INIT process is transferred to start, so the call becomes
Copy Code code as follows:
var loadingmsgobj = new Loadingmsg ();
function startloading () {
Loadingmsgobj.start ("Spanid", "Loading");
}
In terms of object-oriented habits, I'm personally inclined to type in the first way, passing parameters when instantiating an object, rather than executing an object method.
In addition to the SetInterval method pass parameter, if the argument is a simple string, you can
SetInterval ("displayxyz (' xyz ')", 1000);
If the argument is an object,
You can setinterval (function () {displayxyz (obj);},1000);
Loadingmsg is still primarily used in Ajax, and is applied to scenarios where execution time may be long, loadingmsgobj.start () after a request is sent, Loadingmsgobj.end () When a response is successfully obtained.
