面题系列：网页休眠

Offer 驾到，掘友接招！我正在参与2022春招打卡活动，点击查看活动详情。

前言

本道面题为之前在上海某上市公司团队负责人一面遇到的问题（差一点没反应过来，汗~），就在这里分享给大家吧。

题目描述

你可以用js让网页暂时休眠2秒钟么，注意，在休眠期间，我们无法对该网页做任何脚本操作，直至休眠结束为止。

考察点

1. 对js单线程的理解
2. 原生js的手写能力

解题思路

1. js引擎执行js时只分了一个线程给他执行，也就是执行js时是单线程的。
2. 我们要让该网页休眠，类似于 window.alert 弹框那样，阻止网页的行为。
3. 可以使用类似于while等一直不停循环的方式去阻塞。
4. 阻塞前记录时间戳，每次循环跟记录前时间戳做对比，两秒后跳出循环。

实现

while法实现

function sleep(time = 1000) {
    let startTime = new Date().getTime();
    let nowTime = new Date().getTime();
    while (startTime+time>nowTime) {
        nowTime = new Date().getTime();
    }
}

这里我们先记录了startTime和nowTime，分别为初始时间戳与当前时间戳，然后不停的循环，每循环一次就重新记录一下当前的时间戳，直至大于要等待时间结束为止。

执行演示

document.getElementById("btn").addEventListener("click", e => {
    console.log("我要执行啦~",new Date())
    sleep(2000)
    console.log("我执行完啦~",new Date())
})

结语

其实就考察你怎么阻塞线程，迷惑点是具体说了休眠2秒恢复等关键词，会马上条件反射联想到计时器，但再往下想就会误入歧途。