首页 > 其他分享 >js闭包问题、js事件循环机制、async与defer、同步与异步模式

js闭包问题、js事件循环机制、async与defer、同步与异步模式

时间:2022-11-15 21:37:30浏览次数:54  
标签:闭包 defer 异步 js 任务 Promise async 执行

js闭包问题

定义:闭包就是有权访问其他函数作用域内的其他变量的函数。

实现机制:在访问变量的函数中return一个匿名函数,这时匿名函数的作用域链将指向该函数的作用域。

!!!由于闭包在外部引用了其他变量,故在原本的函数执行过后其他变量无法被内存回收。

同步模式aynchronous与异步模式asynchronous

·js是单线程语言,代码从上到下解析执行,若只有同步aync模式,那么页面将会阻塞,故需要异步async执行。

·js代码运行顺序:首先运行主线程,在遇到异步代码,如定时器时,会将其放入任务队列中,等主线程运行完毕后再将任务队列中的事件取出来按顺序执行。

js事件循环

·当执行异步任务时,异步任务中可能也会有同步任务和异步任务,先执行主线程后再次进入任务队列执行异步任务,这个过程会无限循环下去,这个过程就是事件循环。

·宏任务:普通任务,正常执行,正常的异步任务都是宏任务,比如定时器、IO任务

·微任务:优先于宏任务执行,但是不会抢断,有queueMicrotask、async、Promise

!!!在异步任务中,先执行微任务,再执行宏任务。

 

async于defer

使用原因:当一个script标签在页面中时,如果不加设置,文档会在解析到script标签时将js文件解析、编译、执行完毕后才会去执行其他元素,async于defer则会将script标签的元素变为异步执行模式,使得页面不会停留在标签处,当dom元素解析完毕后再加载js文件。   区别:async会引用时就将script异步编译执行,没有顺序可言,但是defer则有顺序,会在最后再执行。  

async函数与await表达式

·async函数:函数的返回值是一个Promise对象,Promise对象的值由async函数执行的返回值决定,需要使用.then函数输出值。

·await表达式:表达式右侧一般为Promise对象,也可以是其他值;如果是Promise对象,那个await会阻塞后面的代码,直到拿到Promise对象的resolve值作为其运算结果;如果是其他值,则把其他值作为其结果

·async与await是非阻塞的,await阻塞的只是async指向的函数而不是整段代码,async与await均基于Promise,async始终会返回一个Promise对象。

标签:闭包,defer,异步,js,任务,Promise,async,执行
From: https://www.cnblogs.com/jackdongdong/p/16894008.html

相关文章

  • js继承链讲解
    构造函数可以制作一个老虎对象js没有类的概念,因此js的继承不是通过类的继承实现的,而是通过原型的概念来实现的//这个构造函数用来制造对象functiontiger(){ this.b......
  • Tween.js动画
    一,安装及引用#yarnyarnadd@tweenjs/tween.js#npmnpminstall@tweenjs/tween.js--save#引用importTweenfrom'@tweenjs/tween.js'二,基本使用impor......
  • 浅析 js 实现网页截图的两种方式
    参考:https://juejin.cn/post/6844903465756393486<p>Web端的截图(生成图片)并不算是个高频的需求,资料自然也不算多,查来查去,也不过Canvas和SVG两种实现方案,原......
  • 淘宝数据采集之js采集
    搜索页面采集,数据在控制台哦!!!搜索页面采集,数据在控制台哦!!!搜索页面采集,数据在控制台哦!!!既然能打到控制台,当然也能传到系统!!!既然能打到控制台,当然也能传到系统!!!既然能打......
  • 淘宝首页数据采集之js采集
    搜索页面采集,数据在控制台哦!!!搜索页面采集,数据在控制台哦!!!搜索页面采集,数据在控制台哦!!!既然能打到控制台,当然也能传到系统!!!既然能打到控制台,当然也能传到系统!!!既然能打......
  • 使用vue-json-editor实现json编辑框
    1、进入到自己的项目,使用npm安装vue-json-editornpminstallvue-json-editor--save2、在vue组件中使用vue-json-editor<template><div><p>vue-json-edito......
  • simpread-(130 条消息) js 中常见的导入导出方式_AntyCoder 的博客 - CSDN 博客_js 导
    常见的导出方式创建文件foo.js//设置常量constname='tom';constage=20;consthello=function(age){console.log('张三今年'+age)}方式一exportc......
  • js实现深度优先遍历和广度优先遍历
    什么是深度优先和广度优先其实简单来说深度优先就是自上而下的遍历搜索广度优先则是逐层遍历,如下图所示深度优先广度优先两者的区别对于算法来说无非就是时......
  • .NET 7 升级Visual Studio 2022 17.4发生 WorkloadManifest.json冲突,导致项目无法加载
    .NET7的发布,升级VisualStudio2022的17.4版本,然后无法打开所有解决方案。提示信息如下异常:SDK解析程序失败:"尝试解析SDK"Microsoft.NET.Sdk"时,SDK解析程序”Microsoft.Do......
  • Newtonsoft.Json null值不序列化
    varjSetting=newJsonSerializerSettings{NullValueHandling=NullValueHandling.Ignore};varjson=JsonConvert.SerializeObject(response,Formatting.Indented,......