当前位置: 首页 > news >正文

以为回调函数是同步的(js的问题)

回调函数可以用来处理 JavaScript 的异步操作,但是选用 Promise、async/await 更好,因为多重回调函数会导致回调地狱。

回调函数不是**同步的**,它是延时操作执行完毕后会被调用的一个函数。

比如全局方法 "setTimeout" ,它第一个参数就是一个回调函数,第二个参数是等待的时间(以毫秒为单位),如下:

function callback() {
​​    console.log("I am the first");
​​}
​​setTimeout(callback, 300);
​​console.log("I am the last");
​​// output
​​// I am the last
​​// I am the first

300毫秒之后,回调函数 callback 会被调用。但是在它完成前,剩下的代码会继续往下运行,所以 "I am the last" 会被先打印出来。

开发者常犯的一个错误是误以为回调函数是同步的。比如,他们会把回调函数的返回值用在其他操作上。

例如下面这个错误:

function addTwoNumbers() {
​​    let firstNumber = 5;
​​    let secondNumber;
​​    setTimeout(function () {
​​        secondNumber = 10;
​​    }, 200);
​​    console.log(firstNumber + secondNumber);
​​}
​​addTwoNumbers();
​​// NaN

会输出 "NaN" ,因为 "secondNumber" 还未被赋值。在 "firstNumber + secondNumber" 被执行的时候,"secondNumber" 还没有被赋值,因为 "setTimeout" 函数要在 "200毫秒" 后才调用回调函数。

最好的解决办法是把剩下的代码放在回调函数里去执行:

function addTwoNumbers() {
​​    let firstNumber = 5;
​​    let secondNumber;
​​    setTimeout(function () {
​​        secondNumber = 10;
​​        console.log(firstNumber + secondNumber);
​​    }, 200);
​​}
​​addTwoNumbers();
​​// 15

http://www.lryc.cn/news/257506.html

相关文章:

  • 如何在小米路由器4A千兆版刷入OpenWRT并通过内网穿透工具实现公网远程访问
  • diffusers pipeline拆解:理解pipelines、models和schedulers
  • Spring 装配Bean详解
  • udp多播组播
  • 逆向修改Unity的安卓包资源并重新打包
  • pycharm中py文件设置参数
  • 简单实现Spring容器(二) 封装BeanDefinition对象放入Map
  • 信创运维产业的发展与趋势:IT管理的新视角
  • 算法通关村第十七关 | 黄金挑战 | 跳跃游戏
  • 思科最新版Cisco Packet Tracer 8.2.1安装
  • 【LeetCode热题100】【滑动窗口】找到字符串中所有字母异位词
  • logback的使用
  • IntelliJ IDEA无公网远程连接Windows本地Mysql数据库提高开发效率
  • VS Code使用教程
  • StarRocks数据模型之主键模型(当前版本v3.1)
  • 正确使用React组件缓存
  • AMEYA360:大唐恩智浦荣获 2023芯向亦庄 “汽车芯片50强”
  • 在Arch Linux上安装yay
  • PHP案例:探究MySQL应用开发喜好的网络调查
  • 力扣第374场周赛题解
  • Linux Docker 安装Nginx
  • 鸿蒙应用开发(二)环境搭建
  • 在 Qt Creator 中编写 Doxygen 风格的注释
  • NSS [NSSCTF 2022 Spring Recruit]babyphp
  • ToolkenGPT:用大量工具增强LLM
  • 2022蓝桥杯c组求和
  • Altium Designer学习笔记11
  • TTS | 2019~2023年最新增强/生成情绪的语音合成调研(20231211更新版)
  • 搜狗输入法v模式 | 爱莉希雅皮肤
  • 2023年阿里云云栖大会-核心PPT资料下载