Timing polling pull data implementation

Timed polling, the first thing that comes to mind is setInterval

let milliseconds = 5000
window.timer = setInterval(() = >{ 
    fun() 
},milliseconds)
Copy the code

Difference between setInterval and setTimeout

• setInterval(function(){}, milliseconds): Continuously calls functions and does not clear timer queues
• setTimeout(function(){}, milliseconds)Execute only functionsAt a time, has its own clear timer

SetInterval will meet our business needs, but there are some pitfalls. Using setInterval alone can cause pages to freeze! The reason for this is related to the JS engine thread. In layman’s terms, setInterval does not clear the timer queue, and each time it is repeated it will cause the timer to stack and eventually freeze your web page. But setTimeout comes with its own clear timer, so it can be used superimposed:

window.setInterval(() = > {
  setTimeout(fun, 0)},30000)
Copy the code

SetTimeout prevents some repetitive operations

// setTimeout can prevent some repetitive operations
// If we can catch exceptions, we can limit the number of exceptions to more than 10, we will no longer pull data, and between exceptions 1 and 10, we can appropriately increase the interval, so that the server has a rest time.
var failed = 0; 

(function loopsiloop( interval ){
   interval = interval || 5000; // default polling to 1 second

   setTimeout(function(){
       $.ajax({
           url: 'foo.htm'.success: function( response ){
               // do something with the response

               loopsiloop(); // recurse
           },
           error: function(){

               // only recurse while there's less than 10 failed requests.
               // otherwise the server might be down or is experiencing issues.
               if( ++failed < 10) {// give the server some breathing room by
                   // increasing the interval
                   interval = interval + 1000; loopsiloop( interval ); }}}); }, interval); }) ();Copy the code

The end of the poll

Destroy the timer in the need to end polling, or beforeDestroy lifecycle functions

clearInterval(timer)
Copy the code

If you need to manually end polling via the button, add clearInterval(timer) to the button’s click event response function

Vue project example

<p v-if="TaskStatus ===' data pulling '">Data pulling in progress</p>

Copy the code

data () {
    return {
        taskStatus: ' '.dataTimer: null,
    }
},
created () {
    // Whether to start the timer
    if (this.taskStatus === 'Data in pull') {        
        this.dataTimer = setInterval(() = > {
            setTimeout(() = >{
                // Return a state. If not, stop the timer and stop pulling data
                this.judgeStatus()
                // Render the returned data to the page
                this.showData()        
            }, 0)},5000)
    }
},
destroyed () {
    clearInterval(this.dataTimer)
},
methods: {
    judgeStatus () {
        axios.get('/judgeStatus').then((res) = > {
            if (res.status === 200) {
                this.taskStatus = res.data.taskStatus
                if(res.data.taskStatus ! = ='Data in pull') {
                    clearInterval(this.dataTimer)
                    this.showData()
                }
            }            
        }).catch((error) = > {
            console.log(error); }}})Copy the code