调用完setTimeout 后，我们的代码继续运行，没有暂停，打印 Message 3 并执行一些必须先执行的操作。
浏览器等待一秒钟，它就会将数据传递给我们的回调函数并将其添加到事件/回调队列中( event/callback queue)。 然后停留在
队列中，只有当**调用堆栈(call stack)**为空时才会被压入堆栈。
代码示例
要熟悉JS引擎，最好的方法就是使用它，再来些有意义的例子。
简单的闭包
这个例子中 有一个返回函数的函数，并在返回的函数中使用外部的变量， 这称为闭包。
function exponent (x) { return function (y) { //和math.pow() 或者x的y次方是一样的 return y ** x } } const square = exponent(2) console.log(square(2), square(3)) // 4, 9 console.log(exponent(3)(2)) // 8
块代码
我们使用无限循环将将调用堆栈塞满，会发生什么，回调队列被会阻塞，因为只能在调用堆栈为空时添加回调队列。
function blockingCode() { const startTime = new Date().getSeconds() // 延迟函数250毫秒 setTimeout(function() { const calledAt = new Date().getSeconds() const diff = calledAt - startTime // 打印调用此函数所需的时间 console.log(`Callback called after: ${diff} seconds`) }, 250) // 用循环阻塞堆栈2秒钟 while(true) { const currentTime = new Date().getSeconds() // 2 秒后退出 if(currentTime - startTime >= 2) break } } blockingCode() // 'Callback called after: 2 seconds'
我们试图在250毫秒之后调用一个函数,但因为我们的循环阻塞了堆栈所花了两秒钟，所以回调函数实际是两秒后才会执行，这是JavaScript应用程序中的常见错误。
setTimeout不能保证在设置的时间之后调用函数。相反，更好的描述是，在至少经过这段时间之后调用这个函数。
延迟函数
当 setTimeout 的设置为0，情况是怎么样？
function defer () { setTimeout(() => console.log('timeout with 0 delay!'), 0) console.log('after timeout') console.log('last log') } defer()
你可能期望它被立即调用，但是，事实并非如此。
执行结果：
after timeout last log timeout with 0 delay!
它会立即被推到回调队列，但它仍然会等待调用堆栈为空才会执行。
用闭包来缓存
Memoization是缓存函数调用结果的过程。
例如，有一个添加两个数字的函数add。调用add（1,2）返回3，当再次使用相同的参数add（1,2）调用它，这次不是重新计算，而是记住1 + 2是3的结果并直接返回对应的结果。 Memoization可以提高代码运行速度，是一个很好的工具。
我们可以使用闭包实现一个简单的memoize函数。
// 缓存函数，接收一个函数 const memoize = (func) => { // 缓存对象 // keys 是 arguments, values are results const cache = {} // 返回一个新的函数 // it remembers the cache object & func (closure) // ...args is any number of arguments return (...args) => { // 将参数转换为字符串，以便我们可以存储它 const argStr = JSON.stringify(args) // 如果已经存，则打印 console.log('cache', cache, !!cache[argStr]) cache[argStr] = cache[argStr] || func(...args) return cache[argStr] } } const add = memoize((a, b) => a + b) console.log('first add call: ', add(1, 2)) console.log('second add call', add(1, 2))
执行结果：
cache {} false first add call: 3 cache { '[1,2]': 3 } true second add call 3
第一次 add 方法，缓存对象是空的，它调用我们的传入函数来获取值3.然后它将args/value键值对存储在缓存对象中。
在第二次调用中，缓存中已经有了，查找到并返回值。
对于add函数来说，有无缓存看起来无关紧要，甚至效率更低，但是对于一些复杂的计算，它可以节省很多时间。这个示例并不是一个完美的缓存示例，而是闭包的实际应用。
代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，
您可能感兴趣的文章: