定时器setTimeout与setInterval的区别

原文链接:https://blog.csdn.net/sun_DongLiang/article/details/82696522

在JavaScript中经常会使用定时器来进行延时或者是重复调用的操作;定时器有两个方法:
1:setInterval(参数1,参数2);
参数1:要执行的代码,可以为function();
参数2:间隔时间 单位ms;
是先执行后使用时间间隔,执行无限次直到取消定时器。(clearInterval(obj))

2:setTimeout(参数1,参数2);
参数1:要执行的代码,可以为function();
参数2:延迟时间 单位ms;
是先延迟后执行,执行一次。(clearTimeout(obj))

问题:setInterval()方法会出现程序并不是按照我们设定的精确时间而调用的问题

原因:只有在函数每一次执行完之后才会调用定时器,继续重新进行调用

重点原理:
JavaScript是运行在单线程的环境中的,所以这就意味着定时器就成了要执行的计划!而不是必须要执行的铁律! 为啥呢? 当函数开始执行时在栈中创建出来一个栈帧,这个栈帧的执行是需要时间的,假设有3秒,在这三秒内,JavaScript的单线程特点就会确保在这3秒内全力的专一的去解决掉这个栈帧(函数)。所以在这个函数运行的时候定时器是没有能力终止他的运行的,因此当函数的运行时间大于间隔时间时,间隔时间1秒到了,但是程序还有2秒没有执行完,那你也给我老老实实的等着函数执行完!

 既可以达到setInterval的循环执行的效果,又解决了setInterval的时间不精确的问题的方法:循环+setTimeout

var i=0;
    function show() {
        console.log(i);
        i++;
        if(i<5){
            setTimeout(show,1000);
        }
    }
    show();

总结
1:setInterval的参数2是间隔时间;
2:setTimeout的参数2是延迟时间;
3:setInterval受单线程影响出现时间不精确现象;
4:使用循环+setTimeout可以完成循环执行,并且弥补了setInterval的不足;

原文地址:https://www.cnblogs.com/xi-li/p/14614778.html