JavaScript setTimeout and setInterval small study on the

Explanation

In the development of the function "Play track", encountered a situation.
Former colleagues have developed a version, this time there is a new feature: Click on any point after the line can be re-played from the clicked point.
Looked at the original version, we see the use of the setTimeout and setInterval, both with the realization of a dotted line to play.
Simple structure is as follows

        function test() {
            setInterval(function () {
                console.log("interval");
                                //省略插值方法得到arr
                                （...）
                play(arr);
            }, 2000);
        }
        function play(arr) {
            setTimeout(function () {
                play(arr);
                console.log("setTimeout");
            }, 40);
        }

I think this is structurally defective, with two timers will certainly errors! Therefore, a reconstructed version will be changed to a two timers with setInterval resolved.
But I do not know at this time due to defect in any place, the lack of theoretical support, now retired and sit a bit careful study

Find the problem

After careful study of the old version, the old version I first picking out the structure, the exclusion of other factors that he simulated a simple version (that is, the code above)
the setTimeout: at the time of execution, is loaded after a specified time after the delay, to perform once expression, performed only once
setInterval: when executed, it is loaded from, every time you perform a specified expression

• Experiment 1: in the use of setInterval and setTimeout methods, and there is no problem, decided to run, the result is as follows

  
  Draw two conclusions from the results
  

1. setTimeout and setInterval not running with the speed 50 times
2. Two inter-interval, the number of timeout to run more and more, show setInterval run longer and longer intervals, increasing delays

• Experiment two: add a little human intervention to perform again

        function test() {
            setInterval(function () {
                console.log("interval");
                play();
            }, 2000);
        }
        function play() {
                    //延迟执行
            for (var i = 0; i < 100000000; i++) {
                
             }
            setTimeout(function () {
                play();
                console.log("setTimeout");
            }, 40);
        }

Draw two conclusions from the results

1. setInterval as a function of treatment time may be reduced interval
2. Presumably, because Javascript is single threaded, setInterval and setTimeout are put in a queue execution, it is susceptible to the influence callback

• Experiment three: Drag the zoom browser

  
  Draw conclusions from the results
  

1. When the browser tab to switch to another page, or minimize the browser, it will affect the timer interval will be reduced both

Involving knowledge points

Comprehensive results on the Internet to collect some information telling:

1. JavaScript is single-threaded, but the browser is multi-threaded, Javascript is a multi-threaded browser thread. (Refer to FIG from: https://www.cnblogs.com/tesky0125/p/4619549.html )
   
2. Javascript callback function will be executed, the trigger event browser, UI rendering event, the first in a queue, the queue according to the rules of FIFO, in order to perform them, when executing the queue setInterval and setTimeout difficult to ensure that also maintains synchronization relationship.
3. setInterval ignore the error codes: Code error, but setInterval will still execute on time, without interruption.
4. setInterval disregard Delay: If you call ajax or other services, he will not control whether to return the callback, will continue on schedule.
5. setInterval not guaranteed to execute: setInterval regularly performed because, if the logic function is long, the time interval of execution finish, a subsequent method will be discarded.
6. The browser will be affected by the state of influence, tab switching, minimize etc.

solution

In doing track playback, setInterval delay is still within the acceptable range, but the best solution is to do with a given online setTimeout.
When setTimeout only once, after the execution is complete, restart the new Timeout, set to calculate the time difference between the runtime, reduce the appearance of distance is becoming ever more

        function test() {
                    //runTime，计算差时
                        runTime = 1000 - 执行耗时;
            setTimeout(callback, runTime);
        }
        setTimeout(test, 1000);