精华内容
下载资源
问答
  • 首先问问自己当面试官问到js中的同步异步,这个问题该怎么回答?理解一个问题无非是what-why-how js同步异步问题是什么–>为什么会产生异步问题–>如何解决。 一、JavaScript起源 技术的出现,和应用场景密切...
  • 主要介绍了简单谈谈JavaScript同步与异步的相关资料,需要的朋友可以参考下
  • 关于JS同步与异步区别

    千次阅读 2019-06-26 12:07:23
    在了解JS中的同步与异步区别前,我需要先理解同步异步的意思。 同步(Synchronization):任务顺序执行,在上一个任务未执行完成之前下一个任务等待执行。 异步(Asynchronous ): CUP暂时搁置当前任务,等到...

    在了解JS中的同步与异步的区别前,我需要先理解同步和异步的意思。

    同步(Synchronization):任务顺序执行,在上一个任务未执行完成之前下一个任务等待执行。

    异步(Asynchronous ): CUP暂时搁置当前任务,等到主线程任务执行完成,再来响应该任务。

    JS是以单线程模型工作的,“单线程”就是说程序的执行次序是以任务队列中的排序决定的,一个任务完成才可以执行下一个任务。

    单线程可以确保操作文档内容时不会有其它的线程试图去修改文档,也不需要担心锁、死锁和竞争状态。

    单线程的执行就意味着浏览器在脚本和事件处理程序执行时打断用户的输入,也就是js脚本和事件处理程序都不能运行太久。

    但是如果事件处理程序执行的是计算密集的任务,就会给文档的载入带来延迟,使得用户无法在脚本完成前看到文档内容。

     

    在JS中,异步有两种,一种是setTimeout()和setInterval()函数,它们会在指定的一段事件后触发指定函数的调用。

    另一种是ajax异步。

    1.计时器异步

    var text = function(){
        console.log("第一次输出.");
        setTimeout(function(){
            console.log("第二次输出.");
        },1000);
        console.log("第三次输出.");
    }
    

    看上面这段代码的输出结果:

    正向输出结果所示,setTimeout函数改变了JS的执行顺序.

    2.ajax异步

    Ajax在

    不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。

    <script type="text/javascript">
    
    function ajaxFunction()
     {
       var xmlHttp=GetXmlHttpObject();//定义XMLHttpRequest对象
      
      xmlHttp.open("GET","****.ashx",true)//设置请求方法,请求的目标页面,以及是否异步
      xmlHttp.setRequestHeader("If-Modified-Since","0");
    
      xmlHttp.onreadystatechange=function(){  //定义XMLHttpRequest对象的onreadystatechange属性    
    
        if(xmlHttp.readyState==4) {   //判断XMLHttpRequest对象的状态 
          if(xmlHttp.status==200){
    
            document.myForm.time.value=xmlHttp.responseText;//通过XMLHttpRequest对象的responseText属性获取回传的数据 
          } 
        }
      } 
      xmlHttp.send(null);//发送异步请求 
    } 
    
    </script> 
    <form name="myForm"> 
      用户: <input type="text" name="username" onkeyup="ajaxFunction();" /> 
      时间: <input type="text" name="time" /> 
    </form> 
    </body>
     </html>

    ajax的执行步骤是:

    当请求被发送到服务器时,需要执行一些基于响应的任务。

    每当 readyState 改变时,就会触发 onreadystatechange 事件

    以上就是关于javascript中的同步与异步。


    具体来说,异步执行的运行机制如下(同步执行也是如此,因为它可以被视为没有异步任务的异步执行)

    1. 所有同步任务都在主线程上执行,形成一个执行栈(execution context stack)。
    2. 主线程之外,还存在一个“任务队列”(task queue),只要异步 
       任务有了运行结果,就在“任务队列”中放置一个事件。
    3. 一旦“执行栈”中的所有同步任务执行完毕,系统就会读取“任务队      
       列”,看看里边有哪些事件。哪些对应的异步任务,于是结束等待 
       状态,进入“执行栈”开始执行。
    4. 主线程不断重复上边的第三步。  
    展开全文
  • 程序同步与异步区别
  • 若要在使用ajax请求后处理发送请求返回的结果,最好使用同步请求,下面为大家介绍下js同步与异步处理的方法和区别,感兴趣的朋友不要错过
  • 延迟脚本执行,相当于将script标签放入页面body标签的底部,js脚本会在document的DOMContentLoaded之前执行。除IE和较新版本的Firefox外,其他浏览器并未支持。 language: 已废弃。大部分浏览器会忽略该值。 src: 可...
  • js同步与异步的理解分析

    千次阅读 2019-05-19 19:47:39
    一、同步与异步的概念 单线程:在JS引擎中负责解释和执行JavaScript代码的线程只有一个,一般称它为主线程。但是实际上还存在其他的线程,可以称之为工作线程。JS的单线程能够提高工作效率。JavaScript的主要用途是...

    一、同步与异步的概念

    1. 单线程:在JS引擎中负责解释和执行JavaScript代码的线程只有一个,一般称它为主线程。但是实际上还存在其他的线程,可以称之为工作线程。JS的单线程能够提高工作效率。JavaScript的主要用途是与用户互动,以及操作DOM,这就决定了它只能是单线程。单线程意味着前一个任务结束,才会执行后一个任务。
    2. 同步:在主线程上排队执行的任务,只有前一个任务执行完毕,才能执行后一个任务。如果在函数A返回的时候,调用者就能够得到预期的结果(即拿到了预期的返回值或者看到了预期的效果),那么这个函数就是同步的。
    3. 异步:不进入主线程、而进入"任务队列"(task queue)的任务,只有"任务队列"通知主线程,某个异步任务可以执行了,该任务才会进入主线程执行。如果在函数A返回的时候,调用者还不能马上得到预期的结果,而是需要在将来通过一定的手段得到,那么这个函数就是异步的 。
    4. 异步的过程:主线程发一起一个异步请求,相应的工作线程接收请求并告知主线程已收到通知(异步函数返回);主线程可以继续执行后面的代码,同时工作线程执行异步任务;工作线程完成工作后,通知主线程;主线程收到通知后,执行一定的动作(调用回调函数)。
    5. 在异步过程中有两个重要的要素,发起函数和回调函数,这两个函数是分离的。
    6. 工作线程在异步操作完成后需要通知主线程,通知机制是工作线程将消息放到消息队列,主线程通过事件循环过程去取消息。
    7. 消息队列:消息队列是一个先进先出的队列,它里面存放这各种消息。
    8. 事件循环:事件循环是指主线程重复从消息队列中取消息,执行的过程。
    9. 同步与异步的区别:同步可以保证顺序一致,但是容易导致阻塞;异步可以解决阻塞问题,但是会改变顺序性。
    10. 任务队列:是一个事件的队列或者消息的队列,所有任务都是在主线程上执行,形成一个执行栈,执行完js主线程的代码才会去看浏览器任务队列中的事件,再执行js代码中该事件对应的代码。任务队列也是一个先进先出的数据结构,排在前面的事件,优先被主线程读取。主线程的读取过程基本上是自动的,只要执行栈一清空,"任务队列"上第一位的事件就自动进入主线程。但是,由于存在后文提到的"定时器"功能,主线程首先要检查一下执行时间,某些事件只有到了规定的时间,才能返回主线程。
    11. 异步的执行机制:
      1)所有同步任务都在主线程上执行,形成一个执行栈(execution context stack)
      2)主线程之外,还存在一个"任务队列"(task queue),只要异步任务有了运行结果,就在"任务队列"之中放置一个事件
      3)一旦"执行栈"中的所有同步任务执行完毕,系统就会读取"任务队列",看看里面有哪些事件,那些对应的异步任务,于是结束等待状态,进入执行栈,开始执行
      4)主线程不断重复上面的第三步

    二、同步与异步的实例

    1. 同步的实例
      1)代码如下:
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>同步测试</title>
    </head>
    <body>
    
    </body>
    <script>
    
            // 同步  执行顺序符合代码的顺序
    
            console.log("我是第一个div的盒子");
            console.log("我是第二个div的盒子");
            console.log("我是第三个div的盒子");
            console.log("我是第四个div的盒子");
            console.log("我是第五个div的盒子");
    
    </script>
    </html>
    

    说明:同步相当于是执行顺序符合代码的顺序,前一个任务执行完毕后才会执行下一个任务。这段程序在控制台中会依次输出 我是第一个div的盒子 我是第一个div的盒子 我是第二个div的盒子
    我是第三个div的盒子 我是第四个div的盒子 我是第五个div的盒子 。

    1. 异步的实例
      1)在js当中最常见的异步操作就是setTimeOut()以及setTimeInterval(),它们可以控制js的执行顺序,被压入了称之为Event Loop的队列。
      2)setTimeOut()方法用于在指定的毫秒数后执行某些操作,可以使用clearTimeOut()方法来阻止函数的执行。在指定的毫秒数后,将定时任务处理的函数添加到执行队列的队尾,所以有时候也可以使用setTimeout解决异步带来的问题。
      代码如下:
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>异步测试</title>
    </head>
    <body>
    
    </body>
    <script>
    
        // 异步测试    setTimeout() 在指定的毫秒数后执行某些操作
    
        console.log("我是第一个div盒子");
        setTimeout(function(){
            console.log("我是第二个div盒子");
        },3000);
        console.log("我是第三个div盒子");
        
    </script>
    </html>
    

    说明:按照代码的执行顺序应该是 我是第一个div盒子 我是第二个div盒子 我是第三个div盒子,但是实际上的输出是 我是第一个div盒子 我是第三个div盒子 我是第二个div盒子。在这里实际上是发生了异步的操作,通过 setTimeout() 函数,设置 我是第二个div盒子 在3秒后执行,添加到执行队列的队尾,让 我是第三个div盒子 先执行,发生异步。

    3)setInterval() 方法用于每隔多少时间执行某些操作,可以使用clearInterval()方法来清除定时。按照指定的周期(以毫秒数计时),将定时任务处理函数添加到执行队列的队尾。
    代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>异步测试</title>
    </head>
    <body>
    
    </body>
    <script>
    
      // 异步测试   setInterval() 每隔多少时间执行某操作
    
        function f3(){
            var test2 = setInterval(f4,5000);
        }
        f3();
    
        function f4(){
            console.log("我是测试的setInterval()函数");
        }
        
    </script>
    </html>
    

    说明:在这里也同样是发生异步操作,本来应该是直接输出 我是测试的setInterval()函数 ,但是实际上是过了5秒后才在控制台中输出。通过setInterval() 函数,将f4函数添加到执行队列中,设置在5秒后执行,发生异步操作。

    4)setTimeOut()以及setTimeInterval()的区别:
    a. setTimeout多少时间之后执行某操作,只执行一次,而setInterval每隔多少时间之后执行某操作,如果不用clearInterval清除的话,将会一直执行下去
    b. 两个方法都返回一个id值,用于清除定时器,分别是clearTimeout和clearInterval
    c. setTimeout的性能是要优于setInterval的
    d. setTimeout和setInterval都不能保证到了时间点一定会执行,这得取决于当前js线程队列里面还有没有其他待处理队列,如果刚好没有的话,那么就能刚好执行,如果当前线程里面已经有了其它待处理队列正在执行,那么需要排队,等到javascript线程空闲的时候才会执行定时器
    e. setTimeout是等待循环的操作执行完成之后,才继续在间隔时间之后再把循环操作添加到javascript的线程里面,而setInterval是不等待的,它从来不管放在线程里面循环操作有没有执行完成,反正到点就会把循环操作添加到javascript线程队列里面
    f. 能用setInterval实现的操作,一定能用setTimeout来实现
    5)Event Loop:一个回调函数队列,当异步函数执行时,回调函数会被压入这个队列。JavaScript引擎直到异步函数执行完成后,才会开始处理事件循环。这意味着JavaScript代码不是多线程的,即使表现的行为相似。事件循环是一个先进先出(FIFO)队列,这说明回调是按照它们被加入队列的顺序执行的。

    三、js的异步情况以及异步解决

    1. js的异步情况:
      1)异步函数,比如 setTimeout和setInterval
      2)ajax
      3)node.js中的许多函数也是异步的
    2. 异步问题的解决
      1)命名函数
      清除嵌套回调的一个便捷的解决方案是简单的避免双层以上的嵌套,传递一个命名函数给作为回调参数,而不是传递匿名函数
      代码如下:
    var fromLatLng, toLatLng;
     var routeDone = function( e ){
         console.log( "ANNNND FINALLY here's the directions..." );
          // do something with e
      };
      var toAddressDone = function( results, status ) {
          if ( status == "OK" ) {
              toLatLng = results[0].geometry.location;
              map.getRoutes({
                 origin: [ fromLatLng.lat(), fromLatLng.lng() ],
                 destination: [ toLatLng.lat(), toLatLng.lng() ],
                 travelMode: "driving",
                 unitSystem: "imperial",
                 callback: routeDone
             });
         }
     };
     var fromAddressDone = function( results, status ) {
         if ( status == "OK" ) {
             fromLatLng = results[0].geometry.location;
             GMaps.geocode({
                 address: toAddress,
                 callback: toAddressDone
             });
         }
     };
     GMaps.geocode({
         address: fromAddress,
         callback: fromAddressDone
     });
    

    2)使用promise
    promise在异步执行的流程中,把执行代码和处理结果的代码清晰地分离了
    promise还可以做若干个异步的任务
    代码如下:

    'use strict';
     
     var logging = document.getElementById('test-promise2-log');
     while (logging.children.length > 1) {
         logging.removeChild(logging.children[logging.children.length - 1]);
     }
     
     function log(s) {
         var p = document.createElement('p');
        p.innerHTML = s;
         logging.appendChild(p);
    }
     // 0.5秒后返回input*input的计算结果:
     function multiply(input) {
         return new Promise(function (resolve, reject) {
             log('calculating ' + input + ' x ' + input + '...');
            setTimeout(resolve, 500, input * input);
         });
     }
     
     // 0.5秒后返回input+input的计算结果:
     function add(input) {
        return new Promise(function (resolve, reject) {
           log('calculating ' + input + ' + ' + input + '...');
             setTimeout(resolve, 500, input + input);
         });
     }
     
     var p = new Promise(function (resolve, reject) {
        log('start new Promise...');
         resolve(123);
     });
    
    p.then(multiply)
      .then(add)
      .then(multiply)
      .then(add)
      .then(function (result) {
        log('Got value: ' + result);
     });
    
    展开全文
  • js中的同步异步区别和理解

    千次阅读 2019-07-31 21:43:38
    js中的同步异步区别和理解 前端面试中很容易问到的问题就是同步异步的 <script> setTimeout(function() { console.log(1) }) console.log(2); </script> ...

    js中的同步和异步的区别和理解

    前端面试中很容易问到的问题就是同步和异步的,其实很多人潜意识是知道怎么用,也大概明白一些,但是就是不知道该怎么表达,怎么去描述这个问题。我们可以按这个思路来回答—why-what-how
    why(为什么):js是单线程的,只能处理完一件事再做另外一件事,但是设想如果前面一件事花费的时间特别长,我们就只能一直等着他,就会阻塞下面的进程,这样程序运行时间增长,就会降低用户体验。(这里可能有人会想到,如果js是多线程的,不就解决这个问题了,但是其实这是由他的主要功能决定的,他的功能是与用户互动,以及操作DOM,如果在同一个时间,一个进程创建了这个节点,另一个删除了这个节点,那就很尴尬了
    what(同步和异步是什么):
    同步:按照一定的顺序去执行,执行完一个才能执行下一个
    异步:执行顺序是不确定的,由触发条件决定,什么时间执行也是不确定的,即使是定时器(下面做解释),异步处理可以同时执行多个。

    下面看一个小小的异步的案例

    <script>
            setTimeout(function() {
                console.log(1)
            })
            console.log(2);
        </script>
        2 1
    

    上面得执行结果是先打印2,然后再打印1,(下面解释)
    如果想知道里面的原理,我们可以从js的执行机制入手:
    首先了解两个概念,同步任务和异步任务:
    同步任务:只有前一个任务执行完成后,才可执行下一个任务,在主线程中
    异步任务:这个队列的所有任务都是不进入主线程执行,进入任务队列,被浏览提供的线程执行,当执行完毕后就会产生一个回调函数,并且通知主线程,在主线程执行完当前所执行的任务后,就会调取最早通知自己的回调函数,使其进入主线程中执行,比如ajax请求,再主线程中呈现的就是请求结果~

    js的执行机制
    1、先判断是js代码是同步的还是异步的,同步的就是同步任务,直接进入主线程处理,异步的就进入任务列表
    2、当任务列表内的异步处理达到了触发条件时候(点击事件被点击时),就进入任务队列
    3、当所有的主线程的任务执行完毕之后,才会将任务队列里面的任务(回调函数)添加到主线程。

    这也就是为什么会先执行同步,再执行异步的原因,也就是先打印2,再打印1的原因
    另外也是因为先执行同步,那么如果同步执行时间太长或者出错,死循环,就不会处理异步里面的回调函数了(上面两个问题的解释)

    总结:js的异步处理是和浏览器一起作用的,js是单线程的,但是浏览器是多线程的。浏览器可以同时处理多个异步任务。但是这些异步任务中的回调函数还是在js的主线程中一个一个执行的。

    以上均是我个人的理解,仅供参考。
    以下是参考的一些博客,不是太理解的可以看看:
    鱼活在水中的博客:https://blog.csdn.net/qq_39480597/article/details/79662913;
    [阮一峰老师的博客]http://www.ruanyifeng.com/blog/2014/10/event-loop.html

    展开全文
  • js同步与异步任务

    2020-07-11 12:12:23
  • 主要讨论并验证了node.js中的forEach()是同步还是异步,思路和方法分享给大家,有需要的小伙伴可以参考下。
  • js中的同步与异步

    千次阅读 2020-01-14 07:50:00
    整篇文章主要了解js中的同步与异步问题,js是一门单线程的语言,浏览器解析js代码是同步顺序执行的,但是浏览器本身是多线程的, js实现异步是通过事件循环来实现的 定时器setTimeout,setInterval本质上是浏览器提供...
  • JS同步异步区别 js是一门单线程语言,所谓"单线程",就是指一次只能完成一件任务。如果有多个任务,就必须排队,前面一个任务完成,再执行后面一个任务,以此类推。如果一个任务耗时过长,那么后面的任务就...
  • 下面小编就为大家带来一篇不同js异步函数同步的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 下面小编就为大家带来一篇JS 动态加载js文件和css文件 同步/异步的两种简单方式。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 宏任务和微任务 js是单线程 宏任务 分类:setTimeout,setInterval,requrestAnimationFrame 微任务 分类:new Promise().then(回调),process.nextTick 一、 async function async1() { console.log('async1 start...
  • 首先,不同于其他后端语言,javascript语言是单线程机制。所谓单线程就是按次序执行,执行完一个任务再执行下一个。 对于浏览器来说,也就是无法在渲染页面的同时执行代码。 同步是指一个线程要等待上一个线程执行...
  • 同步和异步同步异步代码执行规则获取返回值回调函数获取异步API返回值异步代码执行顺序回调函数控制异步代码执行顺序回调地狱promise透传Promise 值传递 同步 同步:只有当前API执行完成后,才能继续执行下一个API ...
  • 同步与异步区别

    2020-06-08 19:47:48
    同步与异步区别 最近在学习ajax,而ajax(Asynchronous JavaScript and XML)是一种异步JavaScript和XML技术。鉴于此,就先来了解下同步与异步的思想和区别。 一:同步与异步 同步同步是指一个进程在执行某个...
  • 前端面试:js同步与异步问题

    千次阅读 2019-03-31 03:23:32
    前言 我本来是打算写一篇co...首先问问自己当面试官问到js中的同步异步,这个问题该怎么回答?理解一个问题无非是what-why-how js同步异步问题是什么-->为什么会产生异步问题-->如何解决。 一、JavaScrip...
  • js中的同步异步的个人理解

    万次阅读 多人点赞 2017-06-09 15:09:05
    你应该知道,javascript语言是一门“单线程”的语言,不像java语言,...那么这里说的同步异步到底是什么呢?其实个人觉得js官方的文档在使用两个词的时候并不准确,包括很多其他词汇,都只是听起来高深,但实际应用好
  • 本篇文章讲述了JS同步异步、延迟加载的方法,具有很好的参考价值,希望对大家的学习有所帮助
  • 详细解析JavaScript的Ajax之同步异步区别 博客整理到这里基本上JavaScript的初级知识就整理完了,现在我们来说一下看JavaScript的最后一个知识点——Ajax。 (Asynchronous Javascript And XML) 即异步 ...
  • JS同步异步问题

    千次阅读 多人点赞 2019-02-26 10:53:52
    一、单线程 (1)单线程的概念  ... 答案是否定的,JavaScript是一门单线程的语言,因此,JavaScript在同一个时间只能做一件事,单线程意味着,如果在同个时间有多个任务的话,这些任务就需要进行...
  • JS是单线程 单线程:排队,所有的任务工作都需要进行先排队,前一个任务完成了之后才会执行下一个任务,如果前一个任务所需的事件很长,后一个任务就不得不一直等待。 单线程导致的问题是,如果一个JS执行的时间...同步
  • Javascript同步与异步

    2021-02-18 02:27:33
    Javascript同步与异步 JS是单线程 JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事。这是因为Javascript这门脚本语言诞生的使命所致——JavaScript是为处理页面中用户的交互,以及操作DOM而...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 137,003
精华内容 54,801
关键字:

js同步与异步的区别