directory

  1. Write a timer at different intervals
  2. SetInterval has different disadvantages from setTimeout
  3. The delay time of both timers is inaccurate
  4. Because window.setTimeout, this in the timer points to the window

First, write a timer, each interval different time

Write a mySetInterVal(fn, a, b) with each interval a,a+b,a+2b… ,a+nb time, then write a myClear, stop the mySetInterVal above

1) the train of thought

SetInterval is realized by setTimeout+ recursive simulation

Recursively execute this.start to achieve the effect of setInterval


function MySetInterVal(fn, a, b) {
    this.a = a;
    this.b = b;
    this.time = 0; // Change the value to calculate the delay event
    this.handle = -1; // Clear timer

    this.start = () = > {
        // Implement setInterVal with setTimeout+ recursive simulation
        this.handle = setTimeout(() = > { 
            fn(); // Timer callback
            this.time++;
            this.start(); // Call yourself recursively
            console.log( 'Delayed execution time:'.this.a + this.time * this.b);
        }, this.a + this.time * this.b);
    }

    this.stop = () = > {
        clearTimeout(this.handle);
        this.time = 0; }}var a = new mySetInterVal(() = > {console.log('123')},1000.2000 );
a.start();
a.stop();

Copy the code

// Run the result

SetInterval has different disadvantages from setTimeout

Again, the time interval specified by the timer indicates when the timer code is added to the message queue, not when the code is executed. So the actual time when the code is executed is not guaranteed, depending on when it is picked up by the main thread’s event loop and executed.

When the setInterval is pushed into the queue, if there are many tasks in front of it or a task is waiting for a long time, such as a network request, the timer may not be the same as the scheduled execution time

Each setTimeout generated task is pushed directly into the task queue; SetInterval pushes a task to the task queue every time,Check whether the last task is still in the queue. If so, do not add it. If not, add it..

Three, the two timer delay time is not accurate

Because there will be some time-consuming tasks in the timer

The setTimeout itself takes extra time to run before activating the next run. This will lead to a problem of continuous time delay. The original interval is 1000ms, but setTimeout may slowly run to a deviation of 2000ms in total under the unconscious delay.

Because window.setTimeout, this refers to the window

reference

  • Write a timer at different intervals
  • Deep decryption of setTimeout and setInterval – Renames setInterval

-666- Why use setTimeout to simulate setInterval

conclusion

  • SetInterval is realized by setTimeout+ recursive simulation

  • Again, the time interval specified by the timer indicates when the timer code is added to the message queue, not when the code is executed. So the actual time when the code is executed is not guaranteed, depending on when it is picked up by the main thread’s event loop and executed.

  • Each setTimeout generated task is pushed directly into the task queue; SetInterval pushes a task to the task queue every time,Check whether the last task is still in the queue. If so, do not add it. If not, add it..

  • SetTimeout is more accurate than setInterval

  • The delay time of both timers is inaccurate

  • Because window.setTimeout, this in the timer points to the window