jquery promise (Deferred)

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jquery promise</title>
</head>
<body>
  <div id="app">
    <div id="result"></div>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script>
    $(‘#result‘).html(‘waiting data...‘);

      var promise = wait();
      promise.done(result);

      function result() {
        $(‘#result‘).html(‘done‘);
      }

      function wait() {
        var deferred = $.Deferred();

        setTimeout(function() {
          deferred.resolve();
        }, 2000);

        return deferred.promise();
      }
  </script>
</body>
</html>
时间: 2024-08-24 15:01:51

jquery promise (Deferred)的相关文章

Jquery中的异步编程浅析 延期(deferred)的承诺(promise)

引子 相信各位developers对js中的异步概念不会陌生,异步操作后的逻辑由回调函数来执行,回调函数(callback function)顾名思义就是"回头调用的函数",函数体事先已定义好,在未来的某个时候由某个事件触发调用,而这个时机,是程序本身无法控制的. 举几个常见例子: 事件绑定 动画 Ajax 上面的例子简单.典型,易于阅读和理解. 为了引出本文的主题,假设现在有3个ajax异步操作,分别为A.B.C,每个都封装成了函数,并可传入success回调作为参数. 请考虑以下场

延期(deferred)的承诺(promise) —— jq异步编程浅析

引子 相信各位developers对js中的异步概念不会陌生,异步操作后的逻辑由回调函数来执行,回调函数(callback function)顾名思义就是“回头调用的函数”,函数体事先已定义好,在未来的某个时候由某个事件触发调用,而这个时机,是程序本身无法控制的. 举几个常见例子: 事件绑定 动画 Ajax 上面的例子简单.典型,易于阅读和理解. 为了引出本文的主题,假设现在有3个ajax异步操作,分别为A.B.C,每个都封装成了函数,并可传入success回调作为参数. 请考虑以下场景: 希望

javascript设计模式实践之职责链--具有百叶窗切换图片效果的JQuery插件(三)

在上一篇<javascript设计模式实践之模板方法--具有百叶窗切换图片效果的JQuery插件(二)>里,通过采用模板方法模式完成了切换效果对象的构建编写. 接下来就是完成各效果对象的调用和联动. 切换要求:当前图片显示指定时间后执行切换效果并切换下一张图片,最后一个切换后从头开始. 按照要求一个效果对象完成后要执行下一个,最后一个完成后要从头开始, 看上去就是一个带状态通知的环形列表,类似于这样的特征,可以采用职责链模式来构建. 职责链就是由不同的功能处理构成的链表,每一个功能处理作为一个

javascript设计模式实践之迭代器--具有百叶窗切换图片效果的JQuery插件(一)

类似于幻灯片的切换效果,有时需要在网页中完成一些图片的自动切换效果,比如广告,宣传,产品介绍之类的,那么单纯的切就没意思了,需要在切换的时候通过一些效果使得切换生动些. 比较常用之一的就是窗帘切换了. 先贴上完成的效果. 实现原理不复杂,在动的一条一条的称之为“窗帘条”或者是“strip”,每一个strip都是一个div,类似于雪碧图的方式将其背景图的位置设置为strip的可视位置,然后用jquery的animate让他们按照一定规律动起来就完成窗帘切换效果了. 为了使用方便,将这个功能作为jq

编写更好的jQuery代码(转)

这是一篇关于jQuery的文章,写到这里给初学者一些建议. 原文地址:http://flippinawesome.org/2013/11/25/writing-better-jquery-code/ 现在已经有很多文章讨论jQuery和JavaScript的性能问题,然而,在这篇文章中我计划总结一些提升速度的技巧和一些我自己的建议来改善你的jQuery和JavaScript代码.更好的代码意味着更快的应用程序,快速渲染和反应性意味着一个更好的用户体验. 首先,我们要记住最重要的一点是:jQuer

基础知识:Promise(整理)

基础知识:Promise(整理) (来自牛客网)下面关于promise的说法中,错误的是(D) A. resolve和reject都是直接生成一个进入相应状态的promise对象,其参数就是进入相应状态时传递过去的参数,可以在完成回调的参数中得到 B. Promise.resolve(value),Promise.reject(reason)是Promise构造器上还直接提供了一组静态方法 C. 在调用then方法或者catch方法时都是异步进行的,但是执行速度比较快 D. Promise构造器

jQuery介绍(下篇)

jQuery介绍(下篇) 今天接着昨天的来介绍jQuery的相关属性和用法. 一:jQuery操作DOM   jQuery操作属性 1.1设置属性 Ø1.1.1 设置单个属性 //第一个参数:需要设置的属性名 //第二个参数:对应的属性值 attr(name, value); //用法举例 $(“img”).attr(“title”,”美女”); $(“img”).attr(“alt”,“加载失败”); Ø1.1.2 设置多个属性 //参数是一个对象,包含了需要设置的属性名和属性值 attr(o

jQuery介绍(上篇)

jQuery介绍(上篇) 现在前端的开发,已经越来越离不开jQuery了,因为它可以让JS的开发变得越来越简单,而且还解决了浏览器的兼容性问题. 我们来简单的将JS与jQuery做个对比:   JavaScript jquery 入口函数 只能有一个,如果有多个,后面的会覆盖前面 可以有多个,并且不会发生覆盖的情况 代码容错性 代码容错性差,代码出现错误,会影响到后面代码的运行. 代码容错性好,屏蔽错误,并且不会影响后面代码的运行. 浏览器兼容性 兼容性差,比如早期火狐不支持innerText

jQuery入门(2)使用jQuery操作元素的属性与样式

jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 一.区分DOM属性和元素属性 对于下面这样一个标签元素: <img id='img' src="images/image.1.jpg" alt='1' class="imgs"></img> 我们通常将id.src.alt.class称为属性,也即元素属性.但是,当浏览器对标签元素进行解析时,会将元素解析为Dom对象,相应的,元素属性