了解JavaScript线程

初入JavaScript, 对于JavaScript线程的工作原理的了解很重要.

JavaScript引擎是单线程运行的, 浏览器运行期间只会有一个线程在运行, 浏览器内核是多线程的, 这些线程在内核的控制下相互配合,
以保持同步, 一个浏览器至少实现三个常驻线程: JavaScript引擎线程, GUI渲染线程, 浏览器事件触发线程.

• JavaScript引擎线程,
  是基于事件驱动单线程执行的, JS引擎一直等待着任务队列中任务的到来, 然后加以处理, 浏览器无论什么时候都只有一个线程在运行JS程序.
• GUI渲染线程,
  负责浏览器界面渲染, 当界面需要重绘的时候或者由于某种操作引发回流时, 该线程就会执行, 需要注意GUI渲染线程与JS引擎是互斥的, 当JS引擎执行的时候, GUI线程会被挂起, GUI更新会被保存在一个队列中, 等到JS引擎空闲时立即被执行
• 事件触发线程,
  当一个事件被触发时该线程会把事件添加到待处理的队列末尾, 等待JS引擎的处理, 这些事件可能来自JS引擎当前执行代码块, 如: setTimeout, 也可能来自浏览器内核的其他线程如鼠标点击, ajax异步请求等, 但由于JS的单线程关系, 所有这些事件都得排除等待JS引擎处理.
• 当线程中没有任何同步代码的前提下, 才会执行异步代码.

--以上信息来源于https://www.zhihu.com/people/fredshare。

JavaScript中改变执行顺序的函数

在JavaScript中有四个重要的改变程序执行时间顺序的函数:
setTimeout clearTimeout setInterval clearInterval

- setTimeout

定义和用法:
用于在指定的毫秒数后调用函数或计算表达式。
语法:
setTimeout(code, millisec)
# code: 必需参数, 要调用的函数
# millisec: 必需参数, 在执行代码前需要等待的毫秒数
提示:
setTimeout()只执行code一次, 如果要多次调用, 可以使用setInterval()或让code自身再次调用setTimeout.
示例:

<script type="text/javascript">
    var timer = setTimeout(function(){
        console.log("hello world!");
        }, 1000)        //将在1秒后, 输出: hello world.
</script>

- clearTimeout

定义和用法:
clearTimeout() 方法可取消由 setTimeout() 方法设置的 timeout。
语法:
clearTimeout(id_of_settimeout)
# id_of_settimeout: 由setTimeout()返回的ID值.

示例:

<script type="text/javascript">
    var timer;
    
    timer = setTimeout(function(){console.log('hello world'), 1000);  // 将在1秒后输出: hello world.
    clearTimeout(timer);    // 终止了timer这个定时器的执行, 控制台将不会有输出.
</script>

- setInterval

定义和用法:
setInterval()方法可以执照指定的周期(以毫秒计)来调用函数或计算表达式.

语法:
setInterval(code, millisec)
# code: 必需参数, 要调用的函数或要执行的代码串.
# millisec: 必需参数, 在执行代码前需要等待的毫秒数
提示:
setInterval()方法会不停地调用函数, 直到clearInterval()被调用或窗口被关闭. 由setInterval()返回的ID值可用作clearInterval()方法的参数.
示例:

<script type="text/javascript">
    var int;
    int = setInterval("clock()", 100);    // 每100毫秒执行一次clock函数.
    function clock(){
        var t = new Date();
        return t;
    }
</script>

- clearInterval

定义和用法:
clearInterval() 方法可取消由 setInterval() 设置的 timeout。
语法:
clearInterval(id_of_setinterval)
# id_of_setinterval: 由 setInterval() 返回的 ID 值。
示例:

<script type="text/javascript">
    var int;
    int = setInterval("clock()", 100);    // 每100毫秒执行一次clock函数.
    function clock(){
        var t = new Date();
        return t;
    }
    
    clearInterval(int);
</script>

一道有关setTimout的前端面试题

题目:

以下这段代码将会输出什么内容?为什么?如何实现每间隔100毫秒输出?

<script type="text/javascript">
    for(var i=0; i<5; i++){
        setTimeout(function(){
            console.log(i);
        }, 100)
    }
</script>

在这段代码中, setTimeout是异步的代码, 即使setTimeout中设置的等待时间为0也不会立即执行, for循环代码是同步的, 所以要等待for循环执行完之后才会执行异步代码(setTimeout或setInterval).
所以此处将会输出:

image.png

若想实现每间隔100毫秒输出, 则需要使用到闭包.通过一个自执行的函数,将变量i传入.

<script type="text/javascript">
    for(var i=0; i<5; i++){
        (function(idx){        // 在外层添加一个自执行的匿名函数, 并动态传入变量i
            setTimeout(function(){
                console.log(idx);
            }, 100 * idx)
        })(i)
    }
</script>

输出结果:

image.png