• 59.为什么会出现setTimeout倒计时误差?如何减少


    JS倒计时setTimeout为什么会出现误差

    单线程

    JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事。这与它的用途有关。作为浏览器脚本语言,JavaScript的主要用途是与用户互动,以及操作DOM。这决定了它只能是单线程,否则会带来很复杂的同步问题。

    任务队列

    单线程就意味着,所有任务需要排队,前一个任务结束,才会执行后一个任务。如果前一个任务耗时很长,后一个任务就不得不一直等着。

    于是,所有任务可以分成两种,一种是同步任务(synchronous),另一种是异步任务(asynchronous)。同步任务指的是,在主线程上排队执行的任务,只有前一个任务执行完毕,才能执行后一个任务;异步任务指的是,不进入主线程、而进入"任务队列"(task queue)的任务,只有"任务队列"通知主线程,某个异步任务可以执行了,该任务才会进入主线程执行。

    具体来说,异步执行的运行机制如下。(同步执行也是如此,因为它可以被视为没有异步任务的异步执行。)

    (1)所有同步任务都在主线程上执行,形成一个执行栈(execution context stack)。
    (2)主线程之外,还存在一个"任务队列"(task queue)。只要异步任务有了运行结果,就在"任务队列"之中放置一个事件。
    (3)一旦"执行栈"中的所有同步任务执行完毕,系统就会读取"任务队列",看看里面有哪些事件。那些对应的异步任务,于是结束等待状态,进入执行栈,开始执行。
    (4)主线程不断重复上面的第三步。

    下图就是主线程和任务队列的示意图。

    image

    Event Loop(事件循环)

    主线程从"任务队列"中读取事件,这个过程是循环不断的,所以整个的这种运行机制又称为Event Loop(事件循环)。

    为了更好地理解Event Loop,请看下图(转引自Philip Roberts的演讲《Help, I'm stuck in an event-loop》)。

    image

    上图中,主线程运行的时候,产生堆(heap)和栈(stack),栈中的代码调用各种外部API,它们在"任务队列"中加入各种事件(click,load,done)。只要栈中的代码执行完毕,主线程就会去读取"任务队列",依次执行那些事件所对应的回调函数。

    定时器

    除了放置异步任务的事件,"任务队列"还可以放置定时事件,即指定某些代码在多少时间之后执行。这叫做"定时器"(timer)功能,也就是定时执行的代码。

    定时器功能主要由setTimeout()和setInterval()这两个函数来完成,它们的内部运行机制完全一样,是将指定的代码移出本轮事件循环,等到下一轮事件循环,再检查是否到了指定时间。如果到了,就执行对应的代码;如果不到,就继续等待。(区别在于前者指定的代码是一次性执行,后者则为反复执行。)

    为什么使用setTimeout实现倒计时,而不是setInterval?

    setInterval指定的是“开始执行”之间的间隔,并不考虑每次任务执行本身所消耗的时间。因此实际上,两次执行之间的间隔会小于指定的时间。比如,setInterval指定每 100ms 执行一次,每次执行需要 5ms,那么第一次执行结束后95毫秒,第二次执行就会开始。如果某次执行耗时特别长,比如需要105毫秒,那么它结束后,下一次执行就会立即开始。
    为了确保两次执行之间有固定的间隔,可以不用setInterval,而是每次执行结束后,使用setTimeout指定下一次执行的具体时间。

    复制var timer = setTimeout(function f() {
      // ...
      timer = setTimeout(f, 1000);
    }, 1000);
    

    上面代码可以确保,下一次执行总是在本次执行结束之后的1000毫秒开始。(当然存在较小误差,不然就没这道题了。。)

    setTimeout的作用是将代码推迟到指定时间执行,如果指定时间为0,即setTimeout(f, 0),那么会立刻执行吗?

    答案是不会。因为必须要等到当前脚本的同步任务,全部处理完以后,才会执行setTimeout指定的回调函数f。也就是说,setTimeout(f, 0)会在下一轮事件循环一开始就执行。

    setTimeout倒计时为什么会出现误差?

    setTimeout作为异步任务,在实现倒计时功能的时候,除了执行我们功能的实现代码,还会有主线程对任务队列的读取及执行等过程,这些过程也需要耗费一些时间,所以会因为event loop的机制出现些许误差。

  • 相关阅读:
    第3章 神经网络
    OpenCV基础(一)---图像卷积运算
    OpenCV-自定义harris检测
    C++类型转换
    剑指offer之【二叉搜索树与双向链表】
    剑指offer之【复杂链表的复制】
    剑指offer之【二叉树中和为某一值的路径】
    剑指offer之【二叉搜索树的后序遍历序列】
    剑指offer之【从上往下打印二叉树】
    剑指offer之【栈的压入、弹出序列】
  • 原文地址:https://www.cnblogs.com/dream111/p/13472835.html
Copyright © 2020-2023  润新知