SetTimeout and setinterval real-time refresh

The system still needs to regularly refresh the column on the examinee interface in the previous examination system to ensure timely feedback of information. At that time, there was no good implementation method, ajax + setTimeout is used for implementation,

Let's talk about the usage and difference between setTimeout and setinterval:

Use: You can directly call these two methods in JS. This is the window object which has two main timing methods, the expression powder is

SetTimeout (expression, latency );
Setinterval (expression, interaction time );
The delay time/interaction time is in the unit of luxury seconds (1000 ms = 1 s)

The two expressions are very similar, but their functions are quite different. We can also see from the parameter expressions:
SetTimeoutDuring execution, the expression is executed only once after the specified time delay after loading.
SetintervalDuring execution, it executes the expression once every specified time after loading.

So how can we clear them after use: You can use the following method, because each call to these two methods has a unique ID to return, therefore, we only need to clear the unique ID.

For example, VAR id = setTimeout (show (), 1000 );

Cleartimeout (ID );

For example, VAR id = setinterval (show (), 1000 );

Clearinteval (ID );

 

 

Practice page:

The check box is used to check whether automatic refresh is required for 20 seconds. When the page is opened, it is selected by default, that is, regular refresh.

Implementation solution: Call the timingrefresh () method when loading a page,

<SCRIPT type = "text/JavaScript" Language = "JavaScript"> $ (document ). ready (function () {// if ($ ("# shuaxin "). ATTR ("checked") = true) {// alert ("selected"); timingrefresh (); // indicates that the else is selected. // The status is pending. //} else {// alert (not selected); //}); </SCRIPT>

Timingrefresh () Implementation:

// The VaR timeid is refreshed regularly on the page; // This is the ID returned by the timer and must be set as a global variable; otherwise, function timingrefresh () {window cannot be correctly canceled. cleartimeout (timeid); // before each call to this method, cancel the original timer if ($ ("# shuaxin "). ATTR ("checked") = true) {/*** it is appropriate to use setTimeout in this environment, assume that a JS function will be called on the page after the page is loaded. * If window is used. setinterval, an object will appear after each overload, which will be uncontrollable, and * the setTimeout function will end after this reload, and another will appear after the reload, it is suitable for use here **/timeid = setTimeout ("examineesearch (1, 'examineelistaction. action ') ", 20000); // refresh only once in 20 seconds. // timeid = Window. setinterval ("examineesearch (1, 'examineelistaction. action ') ", 5000); // automatically refresh once every 5 seconds} else {// alert (" set to false "); // window. clearinterval (timeid); // cancel refreshing window. cleartimeout (timeid );}}

You can think about the above implementation method: I chose the setTimeout () method instead of setinterval (); the reason is that I will call this method every time the page is loaded, then determine whether the check box is selected
If selected, refresh is set to 20 seconds later. Refresh only once. If you refresh one after 20 seconds, after each page is loaded, I call this method, in fact, setinterval () is called again

After several page refreshes, N multiple timeids have actually been generated, and each timeid is refreshed once every 20 seconds. The consequences can be imagined, therefore, when using these two functions, You must select them based on your actual needs,

Instead, you cannot simply choose based on the definition of the function.

There is also the Ajax method called in this method I have also written it out, if you have problems with the implementation of Ajax, you can see the http://www.cnblogs.com/shenliang123/archive/2012/04/16/2452670.html

// Function examineesearch (type, tagaction) {If (type = 0) {// indicates the standard VAR jiazai = Document to be refreshed. getelementbyid ("jiazai"); // display the loading flag} var claid = $ ("# claid "). val (); // class ID var examid = $ ("# examid "). val (); // The Exam ID var examineestatus = $ ("# examineestatus "). val (); // test status var subjectivestatus = $ ("# subjectivestatus "). val (); // subjective question grading var resultorder =$ ("# resultorder "). val (); // rank the score var content =$ ("# searchinput "). val (); // The queried content if (content = "---student ID | IP keyword---") {content = 0 ;}// alert (claid ); // alert (claid + examid + examineestatus + subjectivestatus + resultorder + content); $ ("# Middle "). load (tagaction, {sendtime: (new date ()). gettime (), claid: claid, examid: examid, examineestatus: examineestatus, subjectivestatus: subjectivestatus, resultorder: resultorder, content: content}); jiazai. innerhtml + = "refreshed ";}

The Ajax here is the opportunity of struts2, And the implementation is relatively simple