你不知道的JS函数执行时机

在 JavaScript 中，函数的执行时机是一个重要的概念，它决定了函数的调用顺序和执行顺序。理解函数的执行时机对于理解 JavaScript 的工作原理以及编写健壮的代码非常重要。

JS 函数执行时机基础

同步执行和异步执行

在 JavaScript 中，函数的执行可以分为同步执行和异步执行两种。

• 同步执行： 同步执行的函数会在当前执行上下文中立即执行，不会被中断。
• 异步执行： 异步执行的函数不会立即执行，而是在主线程的事件队列中等待，直到主线程空闲时才执行。

函数执行顺序

在 JavaScript 中，函数的执行顺序由以下因素决定：

• 函数的定义顺序： 函数的定义顺序决定了函数在代码中的位置，先定义的函数会在后定义的函数之前执行。
• 函数的调用顺序： 函数的调用顺序决定了函数在代码中的执行顺序，先调用的函数会在后调用的函数之前执行。
• 函数的执行时机： 函数的执行时机决定了函数是在同步执行还是异步执行，同步执行的函数会在异步执行的函数之前执行。

JS 函数执行时机实战案例

setTimeout 和 setInterval

setTimeout() 和 setInterval() 是两个常用的 JavaScript 函数，它们用于在指定的时间后执行函数。

• setTimeout() 函数会在指定的延迟时间后执行一次函数。
• setInterval() 函数会在指定的间隔时间内重复执行函数。

这两个函数都是异步执行的，这意味着它们不会立即执行，而是在主线程的事件队列中等待，直到主线程空闲时才执行。

事件监听器

事件监听器是 JavaScript 中用于监听事件并执行函数的一种机制。当事件发生时，事件监听器会触发并执行相应的函数。

事件监听器是异步执行的，这意味着它们不会立即执行，而是在主线程的事件队列中等待，直到主线程空闲时才执行。

回调函数

回调函数是指在另一个函数中调用的函数。回调函数可以是同步执行的，也可以是异步执行的。

同步执行的回调函数会在调用函数中立即执行。异步执行的回调函数会在主线程的事件队列中等待，直到主线程空闲时才执行。

箭头函数

箭头函数是 JavaScript 中的一种新函数语法，它使用箭头 (=>) 来代替传统函数的 function 。

箭头函数是匿名函数，这意味着它们没有函数名。箭头函数也是闭包，这意味着它们可以访问定义它们的函数的作用域中的变量。

箭头函数是同步执行的，这意味着它们会在调用函数中立即执行。

总结

函数的执行时机是 JavaScript 中一个重要的概念，它决定了函数的调用顺序和执行顺序。理解函数的执行时机对于理解 JavaScript 的工作原理以及编写健壮的代码非常重要。