精华内容
下载资源
问答
  • JS异步执行

    2016-08-31 14:10:32
    JS是单线程的,执行起来是顺序的,在顺序的业务逻辑中当然...这里解释下,如何在普通的JS代码中实现异步执行(Asynchronous)。        a1  a2  function a() {  var n = 0;  
    JS是单线程的,执行起来是顺序的,在顺序的业务逻辑中当然没有问题,如果遇到可以并发执行的业务逻辑,继续排队就很地级了。这里解释下,如何在普通的JS代码中实现异步执行(Asynchronous)。

    < !DOCTYPE html >
    < html>
    < head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title ></ title>
        <meta charset="utf-8" />
    </ head>
    < body>
        <div id="a1"> a1 </div >
        <div id="a2"> a2 </div >
    </ body>
    </ html>
    < script type ="text/javascript">
        function a() {
            var n = 0;
            //根据自己电脑的性能,适当的调整 i 的最大值
            for (var i = 1; i < 4000000; i++) {
                {
                    n = n + i;
                }
                document.getElementById( "a1" ).innerHTML = n.toString();
            }
        }
        function b() {
            document.getElementById( "a2" ).innerHTML = "22222" ;
        }
        a();
        b();
    </ script>
    如上面两个函数,在执行的结果写入<div>时,肯定是a()函数执行完毕后,再执行b()函数,这就是单线程排队。如何 异步执行这两个函数?也就是说a()执行比较慢,b()不用等待a()结束就直接执行。
    =========================================华丽的分割线====================================

    setTimeout 神秘的函数 
    这个函数就是异步的关键所在,代码如下:

    < !DOCTYPE html >
    < html>
    < head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title ></ title>
        <meta charset="utf-8" />
    </ head>
    < body>
        <div id="a1"> a1 </div >
        <div id="a2"> a2 </div >
    </ body>
    </ html>
    < script type ="text/javascript">
        function a() {
            var n = 0;
            //根据自己电脑的性能,适当的调整 i 的最大值
            for (var i = 1; i < 4000000; i++) {
                {
                    n = n + i;
                }
                document.getElementById( "a1" ).innerHTML = n.toString();
            }
        }
        function b() {
            document.getElementById( "a2" ).innerHTML = "22222" ;
        }

        //在这里用setTimeout()执行a函数和b函数,则会产生异步执行,b函数不会等待a执行完毕。
        //其实这个方法我也不是很懂,怎么搞的呀?这是什么语法啊。。。
        function c(fuc) {
            setTimeout( function () { a(); fuc; }, 1000);
        } c(b());
    </ script>
    setTimeout函数设定的时间与实际等待的时间并不一致,会有适当的时间延迟。
    下面总结“异步模式”编程的4中方法,理解他们可以让你写出结构更合理、性能更出色、维护更方便的javascript程序。

    一:回调函数
    这是异步最基本的方法。
    假定有两个函数f1和f2,后者等待前者的执行结果。
    f1();
    f2();
    如果f1是一个很耗时的任务,可以考虑改写f1,把f2写成f1的回调函数。

    function f1(callback){

    setTimeout(function () {

    // f1的任务代码

    callback();

    }, 1000);

    }
    执行代码写成
    f1(f2);
    整体代码如下:
    < !DOCTYPE html >
    < html>
    < head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title ></ title>
        <meta charset="utf-8" />
    </ head>
    < body>
        <div id="a1"> a1 </div >
        <div id="a2"> a2 </div >
    </ body>
    </ html>
    < script type ="text/javascript">
        function a(callback) {
            setTimeout( function () {

                //a要执行的任务开始
                {
                    var n = 0;
                    //根据自己电脑的性能,适当的调整 i 的最大值
                    for (var i = 1; i < 4000000; i++) {
                        {
                            n = n + i;
                        }
                        document.getElementById( "a1" ).innerHTML = n.toString();
                    }
                }
                //a要执行的任务已结束

                //执行传递过来的 第二个函数  b
                callback();
            }, 1000);
        }
        function b() {
            document.getElementById( "a2" ).innerHTML = "22222" ;
        }
        a(b());
    </ script>
    采用这种方式,我们把同步操作变成了异步操作,f1不会堵塞程序运行,相当于先执行程序的主要逻辑,将耗时的操作推迟执行。
    回调函数的 优点是简单、容易理解和部署, 缺点是不利于代码的阅读和维护,各个部分之间高度耦合(Coupling),流程会很混乱,而且 每个任务只能指定一个回调函数。

    二、事件监听
    另一种思路是采取事件驱动模式。任务的执行不取决与代码的顺序,而取决于某个事件是否发生,还是以a()和b()为例,首先为a()绑定一个事件(这里采用jQuery的写法)

    f1.on('done', f2);
    上面这行代码的意思是,当f1发生done事件,就执行f2.然后,对f1进行改写:

    function f1(){

    setTimeout(function () {

    // f1的任务代码

    f1.trigger('done');

    }, 1000);

    }
    f1.trigger('done')表示,执行完成后,立即出发done事件,从而开始执行f2。
    这种方法的优点是比较容易理解,可以绑定多个事件,每个事件可以指定多个回到函数,而且可以“去耦合”(Decoupling),有利于实现模块化。缺点是整个程序都要变成事件驱动型,运行流畅会变得很不清晰。

    三、发布/订阅

    上一节的"事件",完全可以理解成"信号"。
    我们假定,存在一个"信号中心",某个任务执行完成,就向信号中心"发布"(publish)一个信号,其他任务可以向信号中心"订阅"(subscribe)这个信号,从而知道什么时候自己可以开始执行。这就叫做"发布/订阅模式"(publish-subscribe pattern),又称"观察者模式"(observer pattern)。
    这个模式有多种实现,下面采用的是Ben Alman的Tiny Pub/Sub,这是jQuery的一个插件。
    首先,f2向"信号中心"jQuery订阅"done"信号。

    jQuery.subscribe("done", f2);

    然后,f1进行如下改写:

    function f1(){
    setTimeout(function () {
    // f1的任务代码
    jQuery.publish("done");
    }, 1000);
    }

    jQuery.publish("done")的意思是,f1执行完成后,向"信号中心"jQuery发布"done"信号,从而引发f2的执行。

    此外,f2完成执行后,也可以取消订阅(unsubscribe)。

    jQuery.unsubscribe("done", f2);

    这种方法的性质与"事件监听"类似,但是明显优于后者。因为我们可以通过查看"消息中心",了解存在多少信号、每个信号有多少订阅者,从而监控程序的运行。

    四、Promises对象

    Promises对象是CommonJS工作组提出的一种规范,目的是为异步编程提供统一接口。
    简单说,它的思想是,每一个异步任务返回一个Promise对象,该对象有一个then方法,允许指定回调函数。比如,f1的回调函数f2,可以写成:

    f1().then(f2);

    f1要进行如下改写(这里使用的是jQuery的实现):

    function f1(){
    var dfd = $.Deferred();
    setTimeout(function () {
    // f1的任务代码
    dfd.resolve();
    }, 500);
    return dfd.promise;
    }

    这样写的优点在于,回调函数变成了链式写法,程序的流程可以看得很清楚,而且有一整套的配套方法,可以实现许多强大的功能。
    比如,指定多个回调函数:

    f1().then(f2).then(f3);

    再比如,指定发生错误时的回调函数:

    f1().then(f2).fail(f3);

    而且,它还有一个前面三种方法都没有的好处:如果一个任务已经完成,再添加回调函数,该回调函数会立即执行。所以,你不用担心是否错过了某个事件或信号。这种方法的缺点就是编写和理解,都相对比较难
    展开全文
  • 这个函数可以用来取消XMLHttpRequest()发起的异步请求,不是xhr.close()哦。 2. 场景 比如说,在关闭一个模态框后,数据可能还没有过来,这个时候需要把异步请求也关闭,否则在数据过来的时候,xhr....

    1. xhr.abort()

    这个函数可以用来取消XMLHttpRequest()发起的异步请求,不是xhr.close()哦。

    2. 场景

    比如说,在关闭一个模态框后,数据可能还没有过来,这个时候需要把异步请求也关闭,否则在数据过来的时候,xhr.onreadystatechange所注册的处理程序还是会继续执行的。

    转载于:https://www.cnblogs.com/timlinux/p/9335416.html

    展开全文
  • 前言JS异步执行机制具有非常重要的地位,尤其体现在回调函数和事件等方面。但异步有时候很方便,有时候却很让人恼火,下面来总结一下异步执行结果获取的方法回调这是最传统的方法了,也是最简单的,如下代码function...

    前言

    JS异步执行机制具有非常重要的地位,尤其体现在回调函数和事件等方面。

    但异步有时候很方便,有时候却很让人恼火,下面来总结一下异步执行结果获取的方法

    回调

    这是最传统的方法了,也是最简单的,如下代码

    function foo(cb) {

    setTimeout(function() {

    cb(1); // 通过参数把结果返回

    }, 2000);

    }

    foo(function(result) { // 调用foo方法的时候,通过回调把方法返回的数据取出来

    console.log(result);

    })

    Promise

    Promise是ES6里加入的新对象,它可以把一个异步执行的方法封装成支持同步操作的方法,结合 async/await 完美,下面说一下它是怎么封装一个方法的

    function foo() {

    return new Promise((resolve, reject) => {

    setTimeout(function() {

    resolve(1); // 通过 resolve 参数把成功的结果返回

    // reject('error'); // 通过 reject 参数把错误信息返回

    }, 2000);

    })

    }

    // 调用

    foo()

    .then(result => console.log(result))

    .catch(error => console.log(error));

    从上面例子可以看出,Promise取值使用的是 .then() 函数,异常处理用的是 .catch() 函数

    rxjs

    rxjs 是一种设计思想的javascript语言的实现框架,rx原名是:ReactiveX

    官网是 http://reactivex.io/

    开源地址 https://github.com/ReactiveX/rxjs

    rx口号是万物皆是流,跟java里万物皆对象挺像的,它的api也全都是对流进行操作,写起来还是很爽的,下面看一下rxjs怎么封装一个异步执行操作

    注意,用这货首先要安装它在自己的项目里,然后再引入依赖,如果是浏览器环境可以引入js

    import { Observable } from 'rxjs';

    function foo() {

    return new Observable((observe) => {

    setTimeout(function() {

    observe.next(1); // 通过 observe.next() 方法把成功的结果返回

    // observe.error('error'); // 通过 observe.error 方法把错误信息返回

    }, 2000);

    })

    }

    // 调用

    foo()

    .subscribe(

    result => console.log(result),

    error => console.log(error)

    );

    可以看到它跟Promise很像,就是变了几个参数名,不过它可比Promise强大多了

    下面来说一下rxjs里的取消操作,没错请求还能取消,这骚操作也只有rxjs能实现了

    import { Observable } from 'rxjs';

    function foo() {

    return new Observable((observe) => {

    setTimeout(function() {

    observe.next(1); // 通过 observe.next() 方法把成功的结果返回

    // observe.error('error'); // 通过 observe.error 方法把错误信息返回

    }, 2000);

    })

    }

    // 调用,方法里2s后返回数据

    const o = foo().subscribe(

    result => console.log(result),

    error => console.log(error)

    );

    // 设置一个定时器1s后取消订阅,这样console里就不会打印出结果了,这个请求也就被取消了

    setTimeout(function() {

    o.unsubscribe(); // 取消订阅

    }, 1000);

    rxjs除了取消执行外,还有一个牛逼的功能,循环执行,对一个请求可以一直接收它返回的结果,看下下面的例子就明白了

    import { Observable } from 'rxjs';

    function foo() {

    return new Observable((observe) => {

    let count = 0;

    setInterval(function() {

    observe.next(count++); // 通过 observe.next() 方法把成功的结果返回

    // observe.error('error'); // 通过 observe.error 方法把错误信息返回

    }, 1000);

    })

    }

    // 调用

    foo().subscribe(

    result => console.log(result), // 这行会每隔1s打印一条数据

    error => console.log(error)

    );

    因为在 ReactiveX 里一切皆是流,所以也就有很多对流操作的api,比如 fliter, map 等,类似于java8里的 stream 的操作,下面看一下例子说明白了

    import { Observable } from 'rxjs';

    // 对流操作要引入操作类

    import { map, filter } from 'rxjs/operators';

    function foo() {

    return new Observable((observe) => {

    let count = 0;

    setInterval(function() {

    observe.next(count++); // 通过 observe.next() 方法把成功的结果返回

    // observe.error('error'); // 通过 observe.error 方法把错误信息返回

    }, 1000);

    })

    }

    // 调用

    const o = foo();

    o.pipe(

    filter((value: number) => value % 2 === 0),

    map((value: number) => value *= 2)

    ).subscribe(data => console.log(data));

    总结

    以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。

    展开全文
  • Axios取消异步机制

    千次阅读 2020-04-08 15:31:15
    Axios取消异步机制 需要在方法前面加上async,在请求前加上await,这样执行的请求就是同步的机制

    Axios取消异步机制

    在这里插入图片描述

    需要在方法前面加上async,在请求前加上await,这样执行的请求就是同步的机制
    展开全文
  • 网上找了找,类似sleep的功能,基本上都是死循环,跳出(还有一些加入时间比较啥的,其实一点用都没有,没有出让cpu,比不比时间没有差别),这种代码一执行,基本上浏览器都会告诉你,脚本执行缓慢,是否取消。...
  • 在程序中处理异步任务通常比较麻烦,尤其是那些不支持取消异步任务的编程语言。所幸的是,JavaScript 提供了一种非常方便的机制来取消异步任务。中断信...
  • 某次路过同事的工位,刚好看到同事在写面试评价,看到里面有一个问题:组件卸载时自动取消异步请求问题,不及格。 我:??? 现在fetch已经支持手动abort请求了吗? 于是上网去查各种资料:how to abort fetch ...
  • ajax默认是异步加载,如果ajax里面再写一个ajax,两个...所以需要给嵌套的ajax取消异步加载。 红色框选区域为设置同步加载。 执行顺序应该是外层的ajax加载执行完毕之后,里面的ajax才会执行。 仅做笔记使用。 ...
  • 怎样取消 JavaScript 中的异步任务

    千次阅读 2020-04-15 11:47:32
    有时候执行异步任务可能是很困难的,尤其是在特定的编程语言不允许取消被错误启动或不再需要的操作时。幸运的是 JavaScript 提供了非常方便的功能来中止异步活动。在本文中,你可以学到如何创建可中止的函数。
  • 执行过程持续返回简要1. 挑用插件: django-celery jenkins 2. 基于Python版本: Python2.7 3. 基于django版本: ...解决方案:使用django-celery的异步执行操作,把异步执行的数据返回到rabbitmq
  • Post请求如何取消异步

    2019-07-28 21:44:25
    其实关于异步这个问题我还不太懂,因为我还是一只萌新嘛,所以我在做项目时就出现了一个关于异步的问题。 我做的项目是一个客房管理系统,我需要把所有的房间都显示到页面上,所以我就用了for循环一个一个地添加样式...
  • 取消异步回发

    2013-08-30 19:39:02
    通过使用页上的NET UpdatePanel Web 服务器控件,可以在 ASP...在浏览器中, Microsoft AJAX Library 中的Sys.WebForms.PageRequestManager 类在客户端页生命周期中管 理事件以进行异步回发。可以通过处理 PageReques
  • 异步执行 /* 所谓的异步执行 计算机程序执行分为同步执行,和异步执行 所谓的同步执行,就是正常的计算机程序执行的3大顺序流程 顺序控制语句 从上至下,从左至右 分支控制语句 if,switch 循环控制语句 for,while...
  • js异步

    2019-04-22 21:40:46
    关于以js异步编程一直理解的不够透彻,这两个不是相斥的吗? 1、js异步 js引擎是基于单线程事件循环的概念构建的,即同一时刻只允许一个代码块执行,与之相反的Java/C++,它们允许许多个不同的代码块同时执行。...
  • 最近在了解Nodejs,发现其异步操作特点,在解决高并发问题方面,...js异步核心在于,所有异步操作会被挂起,在执行完同步操作后,再去执行异步操作。 在Node中,异步操作更加常见,也是其核心所在。 这里我手写...
  • JavaScript异步编程

    千次阅读 2015-11-25 16:25:41
    Javascript语言的执行环境是"单线程"(single thread)。所谓"单线程",就是指一次只能完成一件任务。如果有多个任务,就必须排队,前面一个任务...在浏览器端,耗时很长的操作都应该异步执行,避免浏览器失去响应,
  • javascript异步编程

    千次阅读 2015-06-27 07:23:43
    异步机制JavaScript的执行环境是单线程的,单线程的好处是执行环境简单,不用去考虑诸如资源同步,死锁等多线程阻塞式编程等所需要面对的...所谓异步执行,不同于同步执行(程序的执行顺序与任务的排列顺序是一致的、
  • JavaScript异步实现

    千次阅读 2016-08-31 16:31:36
    单线程时,基于事件的异步机制又该当如何,这些知识在《JavaScript权威指南》并没有介绍,我也一直困惑了,直到看到一篇外文,才有了些眉目,这里与大家分享下。后来发现《JavaScript高级程序设计》高级定时器和循环...
  • JavaScript异步

    2016-12-20 17:01:18
    我们知道javaScript是单线程异步执行,单线程意味着代码在任务队列(先进先出)中会按照顺序一个接一个的执行。但是异步不是说完全按照代码的书写顺序去执行(不同于c)。 下面第一个我想说的是 setTimeout:   ...
  • js异步

    2016-06-04 11:47:12
    js异步编程读书笔记(一) js提供的异步函数包括两类: 1)I/O函数:js采用的是非阻塞式I/O,需要我们添加事件处理器,使用回调函数来实现阻塞。(node.js——事件驱动型服务器框架) 2)计时函数:setTimeout、...
  • ActiveJob + sidekiq做异步执行任务

    千次阅读 2016-07-16 10:04:01
    初探ActiveJob 简介 ActiveJob 是 Rails 4.2 新加入的功能。这个东西在beta阶段rubyChina就已经有很多高手...ActiveJob 是Rails自己开发运行后台程序的模块,常用于执行运行时间可能很长的工作(比如发送注册邮件
  • js处理异步方式

    千次阅读 2018-10-31 15:07:01
    Javascript语言的执行环境是"单线程"(single thread,就是指一次只能完成一件任务。如果有多个任务,就必须排队,前面一个任务完成,再执行后面一个任务,以此类推)。 这种模式的好处是实现起来比较...
  • 异步执行(异步编程) 回调函数(Callback) ajax(url, () => { // 处理逻辑 }) 事件监听 f1.on('done', f2); function f1() { setTimeout(function () { // ... f1.trigger('done'); }, 1000); ...
  • 可以用其表示异步执行的代码块,也可以用其表示异步计算的值。 异步函数是将promise应用于JavaScript函数的结果,可以暂停执行而不阻塞主线程,可以编写基于promise的代码,组织串行/平行执行的异步代码。 ...
  • 今天在开发中遇到 炎黄平台点击【办理...究其原因,是因为layer.confirm是异步UI,编译器自动先执行其后的代码去了。 下面代码可以将异步改成同步UI layer.confirm('是否执行下一步?', { btn: ['是', '否'], ...
  • 也就是说,JavaScript 同时只能执行一个任务,其他任务都必须在后面排队等待。 注意,JavaScript 只在一个线程上运行,不代表 JavaScript 引擎只有一个线程。事实上,JavaScript 引擎有多个线程,单个脚本只能在一...
  • 异步的认识对比并行机制0.1异步的定义0.2异步的思考0.3 异步对比并行机制和并发机制0.4 对比事件循环机制和任务循环机制0.4 记住在JavaScript中,语句的执行顺序与js引擎的执行顺序不一定一致,所以对代码的调试相比...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 27,416
精华内容 10,966
关键字:

js取消异步执行