为了账号安全,请及时绑定邮箱和手机立即绑定
首页 手记 【九月打卡】第18天...

【九月打卡】第18天 BAT大牛带你横扫初级前端JavaScript面试(第二版)

2022.09.22 11:45 57浏览

学习课程名称:BAT大牛带你横扫初级前端JavaScript面试(第二版)
章节名称:异步(新版)
讲师姓名:双越


课程内容:

  1. 同步和异步的区别
  2. 异步的应用场景
  3. promise
  4. JS基本知识-总结

JS三座大山:

  1. 原型和原型链
  2. 作用域和闭包
  3. 单线程和异步

单线程和异步:
JS 是单线程语言,只能同时做一件事儿
浏览器和nodejs 已支持 JS 启动进程,如 Web Worker:但是并不能改变JS单线程的本质
JS和DOM渲染共用同一个线程,因为JS可修改DOM结构

异步为何产生:为了解决单线程带来的问题

在实际工作中,遇到等待(网络请求、定时任务)不能卡住,需要异步解决方案,解决等待问题,异步是基于回调(callback)函数形式调用的

异步和同步的区别:
异步:不会阻塞代码执行
同步:会阻塞代码执行

异步的应用场景:

  1. 网络请求
  2. 定时任务

针对异步的解决方案,ES6提出了Promise,其解决了回调地狱(callback hell)的问题,从传统的嵌套式往非嵌套式(管道式串联)转变。

手写Promise加载图片

function loadImg(src) {
  const p = new Promise((resolve, reject) => {
    const img = document.createElement("img");
    img.onload = () => {
      resolve(img);
    };
    img.onerror = () => {
      const err = new Error(`图片加载失败 ${src}`);
    };
    img.src = src;
  });
  return p;
}

const url = "图片的地址";

loadImg(url)
  .then((img) => {
    console.log(img.width);
    return img;
  })
  .then((img) => {
    console.log(img.height);
  })
  .catch((err) => console.log(err));

图片描述

点击查看更多内容
0人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
1
获赞与收藏
2

关注TA,一起探索更多经验知识

同主题相似文章浏览排行榜

风间影月说签约讲师

50篇手记,涉及Java、MySQL、Redis、Spring等方向

进入讨论

Tony Bai 说签约讲师

146篇手记,涉及Go、C、Java、Python等方向

进入讨论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消