zoukankan      html  css  js  c++  java
  • 回调函数(在原生ajax中应用) 事件监听 与promise的应用介绍

    回调函数  下面的函数表示在getdate方法执行完再执行log 方法(以此保证在执行log方法时ajax数据能够获取加载完成)
    var data;
    function getdate(callback){ //传入一个callback参数
    var xhr=new XMLHttpRequest();
    xhr.open("get","product.json",true);
    xhr.send(null);
    xhr.onreadystatechange=function(){
    if(xhr.readyState==4 && xhr.status==200){
    data=eval(xhr.responseText);
    callback(); 此时的参数callback相对于log 等于在调用log方法
    console.log(callback==log)
    }
    }
    }
    function log(){
    console.log(data)
    }
    getdate(log); //callback变成实参log

    事件监听(与回调函数效果相同)

    案例

     $("#append").click(function(){
    $("#content").html("<div id='son' style=' 200px;height: 100px; border: 1px solid skyblue'>增加的新内容</div>")
    $(document).trigger("done") //所有文档都加载完成时立即出发done实践,开始执行hander()事件
    })
    function hander(){
    $("#son").click(function(){
    alert(11)
    })
    }

    $(document).on("done",hander)//$(document)发生done事件就执行hander事件

    ajax拿到数据(1.回调函数 2.事件监听 3.自己定义一个promise对象(deffered))

    deferred(应用)

       
    var a;
    var dtd = $.Deferred();
    console.log(dtd);
    var wait = function(dtd){
    var tasks = function(){
    a=1;
    // dtd.reject();//改变dtd的状态:进入失败方法
    dtd.resolve();//改变dtd的状态进入成功方法
    };
    setTimeout(tasks,5000);
    return dtd;
    };
    function log() {
    console.log(a);
    }
    function tip() {
    alert("请求出错了")
    }
    $.when(wait(dtd)).done(function () {
    log(); //等wait方法执行完后执行log方法(成功方法)
    }).fail(function () {
    tip();//失败进入的方法
    })
    angular js 中获取ajax数据用到的then成功方法与 jquery获取ajax用到的success方法的区别 (在于then在promise中生成)
    Promise对象的生成

    ES6提供了原生的Promise构造函数,用来生成Promise实例。

    下面代码创造了一个Promise实例。

    var promise = new Promise(function(resolve, reject) {
    // 异步操作的代码

    if (/* 异步操作成功 */){
    resolve(value);
    } else {
    reject(error);
    }
    });

    Promise的介绍
    Promise是一种模式,以同步操作的流程形式来操作异步事件,避免了层层嵌套,可以链式操作异步事件。

    Promise构造函数接受一个函数作为参数,该函数的两个参数分别是resolve和reject。它们是两个函数,
    由JavaScript引擎提供,不用自己部署。

    resolve函数的作用是,将Promise对象的状态从“未完成”变为“成功”(即从Pending变为Resolved),
    在异步操作成功时调用,并将异步操作的结果,作为参数传递出去;reject函数的作用是,将Promise对象的状态从
    “未完成”变为“失败”(即从Pending变为Rejected),在异步操作失败时调用,并将异步操作报出的错误,
    作为参数传递出去。

    Promise实例生成以后,可以用then方法分别指定Resolved状态和Reject状态的回调函数。

     $q.defer() 构建的 deffered 实例的几个方法的作用。如果异步操作成功,则用resolve方法将Promise对象的状态变为“成功”(即从pending变为resolved);如果异步操作失败,则用reject方法将状态变为“失败”(即从pending变为rejected)。最后返回 deferred.promise ,我们就可以链式调用then方法。

    Promise API

    当创建 deferred 实例时会创建一个新的 promise 对象,并可以通过 deferred.promise 得到该引用。

    promise 对象的目的是在 deferred 任务完成时,允许感兴趣的部分取得其执行结果。

    小结
    Promise对象的优点在于,让回调函数变成了规范的链式写法,程序流程可以看得很清楚。
    它的一整套接口,可以实现许多强大的功能,比如为多个异步操作部署一个回调函数、
    为多个回调函数中抛出的错误统一指定处理方法等等。而且,它还有一个前面三种方法都没有的好处:
    如果一个任务已经完成,再添加回调函数,该回调函数会立即执行。所以,你不用担心是否错过了某个事件或信号。
    这种方法的缺点就是,编写和理解都相对比较难。

  • 相关阅读:
    Java进程线程理解
    Java String练习题及答案
    代理服务器原理(转)
    FTP服务器原理(转)
    SMTP协议及POP3协议-邮件发送和接收原理(转)
    集合框架的类和接口均在java.util包中。 任何对象加入集合类后,自动转变为Object类型,所以在取出的时候,需要进行强制类型转换。
    Java集合框架顶层接口collectiion接口
    java多态--算法实现就是多态
    项目安排
    Scala从零開始:使用Intellij IDEA写hello world
  • 原文地址:https://www.cnblogs.com/yaomengli/p/6814038.html
Copyright © 2011-2022 走看看