The use and introduction of Js timer in production environment

1. Classification

There are two kinds of timers in js

setInterval(code,millsec[,"lang"]) : Calls a function or evaluates an expression at the specified interval (in milliseconds). The method keeps calling the function until the clearInterval() function is called or the window is closed, and the ID value returned by setInterval() can be used as an argument to the clearInterval() method.

setTimeout(code,millsec) : Calls a function or evaluates an expression after the specified number of milliseconds.

2. The difference between settimeout and setinterval

When setTimeout (expression, delay time) is executed, it executes the expression once after a specified time delay after loading. Remember, the number of times is one 
setInterval (expression, interaction time) is different, it starts from the load. After entering, the expression is executed every specified time.

3. Clear the timer:

window.clearInterval(timer1) and window.clearTimeout(time1); both clearing methods can clear the timer set by setTimeout and setInterval (the two methods are different when setting the timer, but there is no difference when clearing the timer) , and the parameter can be not only timer, but also its return value. It should be noted that even if the timer is cleared, its return value will not be cleared, and the return value of the timer set later will also be based on its return value. Continue to the back row;

4. Usage scenarios

(1), write a timer, such as countdown

(2), polling to detect network or login status

(3), polling to refresh the local data of the page regularly

...

5. How to use

The following example uses two timers, setInterval and setTimeout, for polling and detecting network status information.

// Polling to determine if the network is disconnected
checkNet ();

/**
 * Polling to determine whether the network is connected
 */
function checkNet () {
   setInterval(function(){
      $.ajax({
         url: getContextPath()+"/login/checknet",
         type:"post",
         timeout: 5 * 1000,
         success:function(result){
            console.log("Polling connection is successful");
         },
         complete: function (XMLHttpRequest,status) {
                if(status == 'timeout') {
                   console.log("complete network disconnection!");
                  var xmlhttp = window.XMLHttpRequest ? new window.XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHttp");  
                 xmlhttp.abort();   
                    OffTheNet();
                }
            }
      });
   }, 5 * 1000);
}

/**
 * Disconnection solution: re-login
 */
function OffTheNet(outTime){
   websocket.close();
   var _time = 4000;
   if(outTime != null && typeof(outTime) != "undefined"){
      _time = outTime;
   }
   layer.msg("The network is disconnected, please log in again!",{
        icon: 0,
        time: _time
      });
   setTimeout(function(){
      sessionStorage.setItem("OFFTHENET",true);
      location.href = getRootPath()+"/jsps/login/login.jsp";
   },_time);
}

6. Problems that are easy for newbies

       Remember to close the timer task first if there is a timer task on an unnecessary page, especially when jumping from the page of the timed task to another page, if it is not closed in time, there may be redundant request network overhead, and the browser page opens Slow and easy to crash the browser, which happened to me when I was developing. Writing this blog is also a reminder to myself.