I learned 21 lessons today !......
Directly paste the code and write the comments according to my understanding. There is no guarantee that they are all right. If anything is wrong, I hope you can correct it! Thank you.
/// <Reference name = "MicrosoftAjax. js"/>
// Register the namespace Demo
Type. registerNamespace ("Demo ");
Demo. Timer = function (){
/// <Summary> Timer component </summary>
Demo. Timer. initializeBase (this );
This. _ integer = 1000;
This. _ timer = null;
}
Demo. Timer. prototype = {
/// <Summary> get _ interval value </summary>
Get_interval: function (){
Return this. _ interval;
},
/// <Summary> set_interval value </summary>
Set_interval: function (value ){
If (this. _ interval! = Value ){
This. _ interval = value;
// Debugger;
// If the following sentence is commented out, the propertyChanged event will not be triggered.
This. raisePropertyChanged ("interval ");
If (this. _ timer ){
This. stop ();
This. start ();
}
}
},
/// <Summary> Add a tick event </summary>
Add_tick: function (handler ){
This. get_events (). addHandler ("tick", handler );
},
/// <Summary> delete a tick event </summary>
Remove_tick: function (handler ){
This. get_events (). removeHandler ("tick", handler );
},
/// <Summary> callback function </summary>
_ TimerCallback: function (){
// Obtain the tick Function
Var handler = this. get_events (). getHandler ("tick ");
If (handler ){
Handler (this, Sys. EventArgs. Empty );
}
},
/// <Summary> Start Timer </summary>
Start: function (){
If (this. _ interval> 0 ){
// CreateDelegate, which Zhao once said, is not very understandable.
This. _ timer = window. setInterval (Function. createDelegate (this, this. _ timerCallback), this. _ interval );
}
},
/// <Summary> Timer stop </summary>
Stop: function (){
If (this. _ timer ){
Window. clearInterval (this. _ timer );
This. _ timer = null;
}
}
};
/// <Summary> Registration class </summary>
Demo. Timer. registerClass ("Demo. Timer", Sys. Component );
Save the preceding script as js/timer. js.
Page
<% @ Page Language = "C #" AutoEventWireup = "true" CodeFile = "1_ajaxLibray.aspx.cs" Inherits = "ajax_1_ajaxLibray" %>
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head runat = "server">
<Title> AJAX Libray </title>
</Head>
<Body>
<Form id = "form1" runat = "server">
<Asp: ScriptManager runat = "server" ID = "sm">
<Scripts>
<Asp: ScriptReference Path = "~ /Js/timer. js "/>
</Scripts>
</Asp: ScriptManager>
<Script type = "text/javascript">
// Page cycle [the following numbers are in the execution order, not in the js writing order]
/* Sys. Application. add_unload (function () {alert ("Page_unload") ;}); // 3
Sys. Application. add_load (function () {alert ("Page_load") ;}); // 2
Sys. Application. add_disposing (function () {alert ("page_disposing") ;}); // 4
Sys. Application. initialize ();
Sys. Application. add_init (function () {alert ("Page_init") ;}); // 1
*/
</Script>
<Div id = "display">
</Div>
Interval:
<Input value = "1000" id = "txtInterval"/>
<Input type = "button" value = "change" onclick = "ChangeInterval ();"/>
<Span id = "shwoInterval"> </span>
<Script type = "text/javascript">
// When the page is initialized
Sys. Application. add_init (function (){
// Create a component
/*
Id: timer, used as the property of the component, so that you can use $ find ("timer") to find the primary key later.
Tick: onTick, var handler = this. get_events (). getHandler ("tick"); associated with this sentence
When you call start (), the function actually executes the onTick () function. Check the start () function in Timer js.
*/
$ Create (Demo. Timer, {"id": "timer" },{ "tick": onTick, "propertyChanged": onPropertyChanged });
});
Function ChangeInterval (){
Var value = parseInt ($ get ("txtInterval"). value, 10 );
// Debugger; -- less. value is found during debugging.
$ Find ("timer"). set_interval (value );
/*
Because set_interval is executed
This. raisePropertyChanged ("interval ");
So the onPropertyChanged () event will be triggered again,
I tried to comment this. raisePropertyChanged ("interval ");
The onPropertyChanged event is not triggered.
*/
}
Var count = 0;
Function onTick (){
$ Get ("display"). innerHTML = ++ count;
}
// This function (how can we know there are two parameters? Doubt)
Function onPropertyChanged (sender, args ){
// Debugger;
Var property = args. get_propertyName ();
// Debugger;
Var value = sender ["get _" + property]. apply (sender );
$ Get ("shwoInterval"). innerHTML = property + "changed to" + value;
}
// Load event
Function pageLoad (){
$ Find ("timer"). start ();
}
</Script>
</Form>
</Body>
</Html>
Continue Learning tomorrow... , Stick to a video every day! What else do you need to learn?
I want to test sharepoint recently. It's all in English! Headache!
Technorati Tag: ajax
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
