Java自学者论坛

 找回密码
 立即注册

手机号码,快捷登录

恭喜Java自学者论坛(https://www.javazxz.com)已经为数万Java学习者服务超过8年了!积累会员资料超过10000G+
成为本站VIP会员,下载本站10000G+会员资源,会员资料板块,购买链接:点击进入购买VIP会员

JAVA高级面试进阶训练营视频教程

Java架构师系统进阶VIP课程

分布式高可用全栈开发微服务教程Go语言视频零基础入门到精通Java架构师3期(课件+源码)
Java开发全终端实战租房项目视频教程SpringBoot2.X入门到高级使用教程大数据培训第六期全套视频教程深度学习(CNN RNN GAN)算法原理Java亿级流量电商系统视频教程
互联网架构师视频教程年薪50万Spark2.0从入门到精通年薪50万!人工智能学习路线教程年薪50万大数据入门到精通学习路线年薪50万机器学习入门到精通教程
仿小米商城类app和小程序视频教程深度学习数据分析基础到实战最新黑马javaEE2.1就业课程从 0到JVM实战高手教程MySQL入门到精通教程
查看: 364|回复: 0

js解决异步的方法汇总

[复制链接]
  • TA的每日心情
    奋斗
    2024-4-6 11:05
  • 签到天数: 748 天

    [LV.9]以坛为家II

    2034

    主题

    2092

    帖子

    70万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    705612
    发表于 2021-4-30 12:57:27 | 显示全部楼层 |阅读模式

    参考:https://www.cnblogs.com/zuobaiquan01/p/8477322.html 

     

    一、callback回调函数

    回调是一个函数被作为一个参数传递到另一个函数里,在那个函数执行完后再执行。( 也即:B函数被作为参数传递到A函数里,在A函数执行完后再执行B )

    function f1 (callback) {
        setTimeout(function () {
         console.log("1")
            callback();
        },1000);
        }
    function f2(){
            console.log("2")
        }
        f1(f2);

    二、Promise

    (1)promise对象是commonJS工作组提出的一种规范,一种模式,目的是为了异步编程提供统一接口。
    (2)promise是一种模式,promise可以帮忙管理异步方式返回的代码。他讲代码进行封装并添加一个类似于事件处理的管理层。我们可以使用promise来注册代码,这些代码会在在promise成功或者失败后运行。
    (3)promise完成之后,对应的代码也会执行。我们可以注册任意数量的函数再成功或者失败后运行,也可以在任何时候注册事件处理程序。
    (4)promise有两种状态:1、等待(pending);2、完成(settled)。promise会一直处于等待状态,直到它所包装的异步调用返回/超时/结束。
    (5)这时候promise状态变成完成。完成状态分成两类:1、解决(resolved);2、拒绝(rejected)。
    (6)promise解决(resolved):意味着顺利结束。promise拒绝(rejected)意味着没有顺利结束。

     

    'use strict';
    
    // 输出log到页面:
    function log(s) {
       if(s==1){
        console.log("这是1");
        }else if(s>1&&s<=10){
        console.log("这是大于1,小于或等于10")
        }else if(s>10){
        console.log("大于10")    
        }else{
        console.log("el," + s)
        }
    }
    function ins(){
        console.log("一起来嗨皮")
    }
    var p = new Promise(function (resolve, reject) {
        log('start new Promise...');
        var timeOut = Math.random() * 2.5;
        log('set timeout to: ' + timeOut + ' seconds.');
        setTimeout(function () {
            if (timeOut < 1) {
    //             log(timeOut);
                resolve(200);
            }else if(timeOut == 0){
                resolve(1);
            }else {
    //             log(timeOut);
                reject(timeOut);
            }
        }, timeOut * 1000);
    })
    p.then(function (r) {
        log(r);
    })
    
    p.catch(function (r) {
        log(r);
    });
    (1)代码的 关键在于setTimeout()的调用。
    (2)重要的是,他调用了函数resolve()和reject()。resolve()函数告诉promise用户promise已解决;reject()函数告诉promise用户promise未能顺利完成。
    (3)另外还有一些使用了promise代码。注意then和catch用法,可以将他们想象成onsucess和onfailure事件的处理程序。
    (4)巧妙地方是,我们将promise处理与状态分离。也就是说,我们可以调用p.then(或者p.catch)多少次都可以,不管promise是什么状态。
    (5)promise是ECMAscript 6管理异步代码的标准方式,javascript库使用promise管理ajax,动画,和其他典型的异步交互。
     
    简单的说,它的思想是:每一个异步任务返回一个promise对象,该对象有一个then方法,允许指定回调函数。比如,f1的回调函数f2,可以写成:
    f1.then(f2);
    

     

    三、事件监听

    采用事件驱动模式。
     
    任务的执行不取决代码的顺序,而取决于某一个事件是否发生。
     
    监听函数有:on,bind,listen,addEventListener,observe
     
    还是以f1和f2为例。首先,为f1绑定一个事件(采用jquery写法)。
     
    f1.on('done',f2);

     

    上面代码意思是,当f1发生done事件,就执行f2。
     
    然后对f1进行改写:
     
    function f1(){
        settimeout(function(){
           //f1的任务代码
           f1.trigger('done');  
        },1000);
    }

     

    f1.trigger('done')表示,执行完成后,立即触发done事件,从而开始执行f2.
     
    这种方法的优点:比较容易理解,可以绑定多个事件,每一个事件可以指定多个回调函数,而且可以去耦合,有利于实现模块化。
     
    这种方法的缺点:整个程序都要变成事件驱动型,运行流程会变得不清晰。
     
    事件监听方法:
     
    (1)onclick方法
     
    element.onclick=function(){
       //处理函数
    }
    优点:写法兼容到主流浏览器
     
    缺点:当同一个element元素绑定多个事件时,只有最后一个事件会被添加
    

      

    例如:
     
    element.onclick=handler1;
    element.onclick=handler2;
    element.onclick=handler3;
    上诉只有handler3会被添加执行,所以我们使用另外一种方法添加事件
     
    (2)attachEvent和addEvenListener方法
     
    //IE:attachEvent
    elment.attachEvent("onclick",handler1);
    elment.attachEvent("onclick",handler2);
    elment.attachEvent("onclick",handler3);
    上述三个方法执行顺序:3-2-1;
     
    //标准addEventListener
    elment.addEvenListener("click",handler1,false);
    elment.addEvenListener("click",handler2,false);
    elment.addEvenListener("click",handler3,false);
    执行顺序:1-2-3;
     
    PS:该方法的第三个参数是泡沫获取,是一个布尔值:当为false时表示由里向外,true表示由外向里。
     


    四、发布订阅者

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


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

    此外,f2完成执行后,也可以取消订阅(unsubscribe)
    jQuery.unsubscribe("done", f2);
    

     

    五、 Async

     

    哎...今天够累的,签到来了1...
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|手机版|小黑屋|Java自学者论坛 ( 声明:本站文章及资料整理自互联网,用于Java自学者交流学习使用,对资料版权不负任何法律责任,若有侵权请及时联系客服屏蔽删除 )

    GMT+8, 2024-5-19 05:57 , Processed in 0.060495 second(s), 29 queries .

    Powered by Discuz! X3.4

    Copyright © 2001-2021, Tencent Cloud.

    快速回复 返回顶部 返回列表