TypeError [ERR_INVALID_CALLBACK]: Callback must be a function. Received undefined

代码如下:

问题描述:setTimeout失去了延时效果,但回调函数正常运行。
解决:根据报的错,callback必须是个function,那我暂且用个箭头函数包裹我的callback问题,解决了

解决这个问题的过程中,我查了setTimeout()的文档,语法使用时的的确确正确的,但是演示效果也的确是搞丢了。

问题解决了,其中我看了一篇文章让我有所收获:

  1. 自执行函数 形成 闭包 记忆其被创建时的环境(可达到let 的效果)

  2. 直到型、当型死循环

  3. 当用户在文本框里输入字符时,页面将其显示出来。这里其实涉及一个任务,将键盘输入的字符写到输入框中,效果等同于 onkeyup = function(){输入到输入框}

Javascript 引擎单线程机制
  
JavaScript 是单线程执行的,无法同时执行多段代码。当某一段代码正在执行的时候,所有后续的任务都必须等待,形成一个任务队列。一旦当前任务执行完毕,再从队列中取出下一个任务,这也常被称为 “阻塞式执行”。

类似于银行窗口取钱场景,窗口前排一长队,剩余的在等候椅上先等候。
可以理解为:只有在JS线程中没有任何同步代码要执行的前提下才会执行异步代码

所以一次鼠标点击,或是计时器到达时间点,或是 Ajax 请求完成触发了回调函数,这些事件处理程序回调函数都不会立即运行,而是立即排队,一旦线程有空闲就 执行。假如当前 JavaScript 线程正在执行一段很耗时的代码,此时发生了一次鼠标点击,那么事件处理程序就被阻塞,用户也无法立即看到反馈,事件处理程序会被放入任务队列,直到前面的代码结束以后才会开始执行。如果代码中设定了一个 setTimeout,那么浏览器便会在合适的时间,将代码插入任务队列,如果这个时间设为 0,就代表立即插入队列,但不是立即执行,仍然要等待前面代码执行完毕。所以 setTimeout 并不能保证执行的时间,是否及时执行取决于 JavaScript 线程是拥挤还是空闲。

可以理解为:setTimeout只负责将事件处理函数放入队列,并不管你之后何时会执行。

JavaScript中setTimeout的实现原理


首先明确,setTimeout函数是异步代码,但其实setTimeout并不是真正的异步操作

由于JS线程的工作机制:当线程中没有执行任何同步代码的前提下才会执行异步代码,setTimeout是异步代码,所以setTimeout只能等js空闲才会执行

前面提到过,如果代码中设定了一个 setTimeout,那么浏览器便会在合适的时间,将代码插入任务队列,如果这个时间设为 0,就代表立即插入队列,但不是立即执行,仍然要等待前面代码执行完毕。所以 setTimeout 并不能保证执行的时间,是否及时执行取决于 JavaScript 线程是拥挤还是空闲。

也就是说setTimeout只能保证在指定的时间过后将任务(需要执行的函数)插入队列等候,并不保证这个任务在什么时候执行。执行javascript的线程会在空闲的时候,自行从队列中取出任务然后执行它。javascript 通过这种队列机制,给我们制造一个异步执行的假象。

有时setTimeout中的代码会很快得到执行,我们会感觉这段代码是在异步执行,这是因为 javascript 线程并没有因为什么耗时操作而阻塞,所以可以很快地取出排队队列中的任务然后执行它。

待续

感谢JavaScript单线程机制与setTimeout执行原理的介绍(附代码)-js教程-PHP中文网

猜你喜欢

转载自blog.csdn.net/qq_52317104/article/details/120712811