javascript单线程和异步机制

阿柴      2022-02-09     653

关键词:

说到这个异步,首先就要弄懂,什么是同步?我们先来看看,同步和异步的区别在什么地方。 
先来看看一个列子

console.log(100)
setTimeout(function(){
  console.log(200)
},1000)
console.log(300)

打印出来的顺序,100 300 200 
这样子应该看明白了,这个程序是没有阻塞的.. 
一步一步往下执行,先打印出100,然后是是一个setTimeout事件,一秒钟之后打印出200.然后再打印出300.可以函数实际却不是这么执行的。 
这就是一个异步的操作。setTimeout是一个异步的事件。我们来对比看看同步的

console.log(100)
alert(200)
console.log(300)

这就是一个同步的执行过程,首先打印出的100,然后就是弹出一个alert框,你要是一生都不点击确认框,那么这个300就永远也打印不出来。很明显,这就是一个阻塞的过程了 
既然有了异步,那么这种异步的实际应用场合是什么样子的呢? 
一句话,如果不想阻塞后面的操作,那就来一个异步吧。 
主要场景如下 
定时任务:setTimeout setInterval 
网络请求:ajax操作,动态img请求 
事件处理:click等事件 
定时任务本文的一开始就介绍过了,万一是n秒之后呢,难道我要等着你么?想得美! 
看看ajax的网络请求

console.log(100)
$.get('../data.json',function(){
  console.log(200)
})
console.log(300)

这个网络请求,完全是要看网络怎么样,万一请求到了一万年之后,那怎么办?所以咯,我要异步异步异步!!!

console.log(100)
var img=document.createElement('img')
img.onload=function(){
console.log(200)
img.src="../hahhahah.jpg"
}
console.log(200)

这个也是同理的,要是你的图片一直加载不出来,那不好意思,你继续,我先往下进行

console.log(100)
document.getElementById('haha').addEventListener('clcik',function(){
console.log("终于点击了")
})
console.log(200)

鬼知道你什么时候要触发这个点击事件,所以咯,还是一样的哈,啥时候点击了,啥时候执行你。不要影响到别人

难道就没人好奇么?为什么这个js要采取这样子的异步的模式 

这就要说到单线程了,单线程!!!!!!!!!!!!

console.log(100)
setTimeout(function(){
  console.log(200)
})
console.log(300)

先打印出100,然后呢?看到了setTimeout这个函数,哎呀妈呀,这个可是一个异步操作呀,关进小黑屋,先一边呆着去。继续执行,打印出300.好了,程序执行完了,去看看那个黑屋里面的货怎么样了,打印出200

 什么是单线程?意思就是说,一次只能干一个事,就像我们人一样,你能一边学习,一边做饭吗?是同时同步,而不是,我上一秒学习,下一秒做饭,你这个是快速的上下文切换 
还有一种情况,你一边听歌,一边做饭,那好吧,这个谁不会呢?我们这里指的是,你自己有意识的,需要付出心思的同时干两种事情 
程序是单线程的,只能挨个的执行,这个没执行完,下一个免谈,要是碰见了耗时长的任务,如果是多线程的话,还能用另外一个线程来执行,但是单线程的情况下,那你就只能自认倒霉,你就这么耗着吧。 
当然了,人类是聪明的,单线程的春天到了。因为我们想到了异步呀,你不是耗时很长会阻塞么,那你滚吧

那好,我滚了,但是我还是要执行的啊,那我什么时候执行呢? 
这个时候,就要回调来处理 
啥叫回调? 
我的理解就是,你要在某个函数之后调用,不能抢了人家的顺序

function a(){
  console.log("a")
}
function b(fn){
  console.log("b")
  fn()
}
b(a)

像上面的这个函数,是不是我先调用了函数b,然后函数a才能执行啊,那你可以反驳,这样子好麻烦,我直接按顺序不也可以吗。看代码

function b(){
  console.log("b")
}
function a(){
  console.log("a")
}
b()
a()

这样子不也是,先调用了函数b,然后再调用了函数a么?所以,这说明。回调函数真正的用处不在这儿,因为这两种写法没啥子大不了的区别

console.log(100)
setTimeout(function(){
  console.log(200)
},1000)
console.log(300)

那这个例子呢?setTimeout函数被关去了小黑屋,现在轮到他调用了,一秒之后,打印出了200。这就是回调函数的作用啊,100 200都打印出来了之后,又再过了一秒,才轮到这个函数执行,打印出了200

console.log(100)
$.get('../data.json',function(data){
  console.log(data)
})
console.log(300)

看这个网络请求。100 300都打印出来了之后,我去处理这个ajax的请求,请求完了。获取到数据了,我总不能不管了吧,获取的数据总要取出来吧,这个时候,我定义了一个函数,就是用来当请求处理完了之后,用来处理后续的操作的,比如取得请求数据啥的。 
总结:js是一个单线程的,要是遇见耗时的操作,不能白白就这么耗着啊,让这个操作先一边玩去,等我处理完了之后,再去处理这个耗时的操作,当我操作成功之后,用一个回调函数来去处理,至于什么时候请求完成,那就是别的知识点了。这个回调函数具体啥时候执行,就要看你具体是什么操作了

javascript异步机制

单线程异步执行的JavaScriptJavaScript是单线程异步执行的,单线程意味着代码在任务队列中会按照顺序一个接一个的执行。异步代表JavaScript代码在任务队列中的顺序并不完全等同于代码的书写顺序,比如事件绑定、Ajax、setTimeout()... 查看详情

javascript的运行机制

1.JavaScript的单线程机制2.任务队列(同步任务和异步任务)3.事件和回调函数4.定时器5.EventLoop事件循环一、JavaScript的单线程机制,JavaScript的使用单线程是由其主要用途有关,JavaScript是在用户互动、操作DOM元素,如果使用多线程... 查看详情

对javascript中异步同步机制以及线程深入底层了解

  今天在网上看到各种对Js异步同步单线程多线程的讨论经过前辈们的洗礼加上鄙人小小的理解就来纸上谈兵一下吧~   Js本身就是单线程的至于为什么Js是单线程的那就要追溯到Js的历史了总而言之由于Js是浏览... 查看详情

js中的异步以及事件轮询机制

一、JS为何是单线程的?    JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事。那么,为什么JavaScript不能有多个线程呢?这样能提高效率啊。(在JAVA和c#中的异步均是通过多线程实现的,... 查看详情

[转]javascript异步机制详解(代码片段)

...---------------------------------------------------------------------学习JavaScript的时候了解到JavaScript是单线程的,刚开始很疑惑,单线程怎么处理网络请求、文件读写等耗时操作呢?效率岂不是会很低 查看详情

从javascript单线程谈eventloop

...如面试回答js的运行机制时,你可能说出这么一段话:“Javascript的事件分同步任务和异步任务,遇到同步任务就放在执行栈中执行,而碰到异步任务就放到任务队列之中,等到执行栈执行完毕之后再去执行任务队列之中的事件。... 查看详情

javascript运行机制详解(代码片段)

一、为什么JavaScript是单线程?JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事。那么,为什么JavaScript不能有多个线程呢?这样能提高效率啊。JavaScript的单线程,与它的用途有关。作为浏览器脚本语言... 查看详情

深入理解javascript单线程谈eventloop

...如面试回答js的运行机制时,你可能说出这么一段话:“Javascript的事件分同步任务和异步任务,遇到同步任务就放在执行栈中执行,而碰到异步任务就放到任务队列之中,等到执行栈执行完毕之后再去执行任务队列之中的事件。... 查看详情

单线程异步回调机制的缺陷与node的解决方案

一、node单线程异步的缺陷:  单线程异步的优点自然不必多说,node之所以能够如此快的兴起,其单线程异步回调机制相比于传统同步执行编程语言的优势便是原因之一。然而,开发一个node程序,其缺陷也是不可忽视的:二、... 查看详情

javascript事件循环机制

文章目录JavaScript事件循环机制线程和进程的概念浏览器执行线程浏览器内核的多种线程JavaScript事件循环机制JavaScript事件循环机制JavaScript是一门单线程的编程语言,这就意味着它一次只能完成一件事情,如果有多个任务&... 查看详情

理解javascript的执行机制

一直没有深入了解过JavaScript的事件执行机制,直到看到了这篇文章:《这一次,彻底弄懂JavaScript执行机制》 才发觉熟悉JavaScript的执行机制非常重要。毕竟在跟进项目中偶尔需要排查为什么会出现函数执行顺序不一样的情况... 查看详情

javascript同步与异步(代码片段)

阅读目录JavaScript的运行机制运行栈哪些是异步操作?任务队列事件轮询setImmediate与process.nextTicksetTimeout与setIntervalpromise与asyncawaitpromiseasyncawaitJavaScript的编译与执行函数提升JavaScript的运行机制运行栈JavaScript的执行环境是单线... 查看详情

javascript运行机制

JavaScript运行机制阅读目录一、为什么JavaScript是单线程?二、任务队列三、事件和回调函数四、EventLoop五、定时器六、Node.js的EventLoop七、关于setTimeout的测试一、为什么JavaScript是单线程?JavaScript语言是单线程,也就是说,同一个... 查看详情

详解javascript中的eventtloop(事件循环)机制

前言  我们都知道,javascript从诞生之日起就是一门单线程的非阻塞的脚步语言。这是由其最初的用途来决定的:与浏览器交互。  单线程意味着,JavaScript代码在执行的时候,都只有一个主线程来处理所有的任务。  而非... 查看详情

异步编程之事件循环机制(代码片段)

JavaScript是一门单线程语言,我们可以通过异步编程的方式来实现实现类似于多线程语言的并发操作。本文着重讲解通过事件循环机制来实现多个异步操作的有序执行、并发执行;通过事件队列实现同级多个并发操作的先后执行... 查看详情

javascript同步和异步的区别与实现方式

javascript语言是单线程机制。所谓单线程就是按次序执行,执行完一个任务再执行下一个。对于浏览器来说,也就是无法在渲染页面的同时执行代码。单线程机制的优点在于实现起来较为简单,运行环境相对简单。缺点在于,如... 查看详情

js的线程和同步异步以及console.log机制

...笔记~挑几个印象深刻的记录一下吧。js的同步异步以及单线程问题:        都知道单线程是js的一大特性。但是通常io(ajax获取服务器数据)、用户/浏览器自执行事件(onclick、onload、onkeyup等等)以及... 查看详情

javascript运行机制:eventloop(代码片段)

学习JavaScript执行机制能更好的理解JavaScript的代码执行顺序,进而更好的理解JavaScript的异步模式。概述在刚开始学习JavaScript时,我经常会产生两个问题:JavaScript是一门单线程语言,那如何实现异步任务?同步... 查看详情