setTimeout(console.log(12345), 1000)___经典面试题

本文涉及的产品
日志服务 SLS,月写入数据量 50GB 1个月
简介: 本文探讨了JavaScript中`setTimeout`函数的行为,解释了传递函数和函数调用作为`setTimeout`参数时的区别,并通过修改`console.log`函数来演示函数调用是如何立即执行的。

先看现象:

        setTimeout(console.log('12345'), 1000)
        setTimeout(()=>{
   console.log('67890')},1000)

在这里插入图片描述
例1:

        for (var i = 0; i < 10; i++) {
   
            setTimeout(console.log(i), 1000)
        }

在这里插入图片描述
例2

        for (var i = 0; i < 10; i++) {
   
            setTimeout(()=>{
    console.log(i)}, 1000)
        }

在这里插入图片描述
例子1和例子2的区别

主要在于定时器的第一个参数,是一个函数还是一个函数的调用。
我们传入一个函数对的调用,他会立马执行,并不会管第二个参数多少毫秒。
当我们传入一个函数的时候(函数体),他会等毫秒数到了一定条件后执行函数。

我们打印一下console这个构造函数
在这里插入图片描述
所以:我们例1就是第一个参数传入了一个函数调用

        for (var i = 0; i < 10; i++) {
   
            setTimeout(console.log(i), 1000)
        }

他会立即执行。

下面我们改写一下底层的console.log这个函数:

函数体的代码是在一秒钟之后执行的

传入函数体

        let num =10
         console.log = function(params=10){
   
             num++
             params+=num
             console.dir(params)
         }
        for (var i = 0; i < 10; i++) {
   
            setTimeout(()=>{
    console.log(i)}, 1000)
        }

或者

      let num =10
         console.log = function(params=10){
   
             num++
             params+=num
             console.dir(params)
         }
        for (var i = 0; i < 10; i++) {
   
            setTimeout( console.log, 1000)
        }

在这里插入图片描述

传入函数调用:

函数体的代码是在立即执行的

        let num =10
         console.log = function(params=10){
   
             num++
             params+=num
             console.dir(params)
         }
        for (var i = 0; i < 10; i++) {
   
            setTimeout( console.log(), 1000)
        }

主要区分setTimeout的第一个参数是函数还是函数调用

函数:等待定时时间到了执行函数;
函数调用:直接执行函数。

个人理解:

在浏览器读取代码提取到定时器的调用栈中,这个时候需要先将函数读取,加入到定时器调用栈,是函数的话,等待EQ,进而执行;是函数体的话读取就等于结束,读取的时候直接调用了这个函数,并没有走定时器调用栈,按照同步代码执行。
例子:

        for (var i = 0; i < 10; i++) {
   
            setTimeout( console.log("我是定时器里面输出的"+i), 1000)
            console.log("我是正常的啊")
        }

在这里插入图片描述
没有任何延迟的全部输出,同步。

相关实践学习
日志服务之使用Nginx模式采集日志
本文介绍如何通过日志服务控制台创建Nginx模式的Logtail配置快速采集Nginx日志并进行多维度分析。
目录
相关文章
|
27天前
|
前端开发 JavaScript 开发者
console.log()
【8月更文挑战第29天】
45 5
|
3月前
|
机器学习/深度学习 JavaScript 前端开发
你不知道的console.log用法
在JavaScript中,使用`console.log()`时,通过大括号能显示变量名和值。`console.table(data, columns)`用于格式化打印表格。常用方法包括:`console.log()`
33 0
|
4月前
|
JavaScript 前端开发 开发者
使用`console.log()`查看运行结果非常简单
【4月更文挑战第18天】使用`console.log()`查看运行结果非常简单
172 1
|
XML JavaScript 数据格式
JS console.log、console.dir、console.dirxml 区别
JS console.log、console.dir、console.dirxml 区别
69 0
|
C#
C#中Console.WriteLine()与Console.Write的区别
C#中Console.WriteLine()与Console.Write的区别
99 0
|
前端开发
还在console.log一把梭吗?console还有其他骚操作
相信很多童鞋在开发中都是使用console.log()进行调试,本篇文章介绍一下console对象中的一些其他方法,这里并不是常用的方法。
139 0
还在console.log一把梭吗?console还有其他骚操作
|
Web App开发 前端开发 API
Chrome操作指南——入门篇(七)console中的await和log
Chrome操作指南——入门篇(七)console中的await和log
Chrome操作指南——入门篇(七)console中的await和log
|
前端开发
怎么使用console
使用console。 灵活运用console对象所提供的方法,可以让开发变得更简单。
怎么使用console
|
Web App开发 XML JavaScript
Console 3000字完整指南,让你不只会用console.log !
Console 3000字完整指南,让你不只会用console.log !
Console 3000字完整指南,让你不只会用console.log !
|
Web App开发 JavaScript 前端开发
“最简单的” console.log,你真的懂吗?
在这篇文章中,我想和你简单说说,在浏览器中 console.log 一些看起来不符合预期的表现,了解其背后的原因,以避免开发排错时不必要的困惑。
1174 0