집 >웹 프론트엔드 >JS 튜토리얼 >jQuery 소스 코드의 비동기 메커니즘 분석

jQuery 소스 코드의 비동기 메커니즘 분석

不言원래의: 2018-07-09 15:26:581376검색

이 기사에서는 주로 jQuery 소스 코드의 비동기 메커니즘 분석을 소개합니다. 이제는 모든 사람과 공유합니다. 도움이 필요한 친구들은 이를 참조할 수 있습니다.

비동기 메커니즘

Javascript 프로그래밍에는 종종 비동기 프로그래밍이 수반됩니다. 원격으로 데이터를 얻으려면 대량의 비동기 프로그래밍으로 인해 많은 콜백 기능이 필요합니다. JS는 단일 스레드이므로 비동기 작업을 완료하려면 브라우저 이벤트 드라이버를 사용해야 하는 경우가 많으며 이로 인해 코드와 알고리즘이 조각화됩니다. jQuery는 추상적인 비차단 솔루션인 Deferred를 제공합니다. 非阻塞 解决方案: Deferred。

认识异步

alert(1)
setTimeout(function(){
    alert(2)
},0)
alert(3)
//alert(1) 
//alert(3)
//alert(2)

一、认识 `deferred`对象

开发网站的过程中，我们经常遇到某些耗时很长的javascript操作。其中，既有异步的操作（比如ajax读取服务器数据），也有同步的操作（比如遍历一个大型数组），它们都不是立即能得到结果的。

通常的做法是，为它们指定回调函数（callback）。即事先规定，一旦它们运行结束，应该调用哪些函数。

deferred对象是在jquery 1.5版本被引进来的，jquery在回调方面的出处理不是很好，为此就诞生了deferred对象了。deferred对象就是jQuery的回调函数解决方案。在英语中，defer的意思是"延迟"，所以deferred对象的含义就是"延迟"到未来某个点再执行。

二、ajax的链式操作

最开始写法是：

// < 1.5
$.ajax({

　　　　url: "test.html",

　　　　success: function(){
　　　　　　alert("哈哈，成功了！");
　　　　},

　　　　error:function(){
　　　　　　alert("出错啦！");
　　　　}

　　});

如果jquery的版本是1.5以下的，那么返回的是XHR对象，所以没法链式操作，但是高于1.5的版本的话，返回的是Deferred对象,可以进行链式操作。

// >=1.5
$.ajax("test.html")
    .done(function(){
        
    })
    .fail(function(){
        
    })

done()相当于success方法，fail()相当于error方法。采用链式写法以后，代码的可读性大大提高。

三、指定同一操作的多个回调函数

deferred对象的一大好处，就是它允许你自由添加多个回调函数。

还是以上面的代码为例，如果ajax操作成功后，除了原来的回调函数，我还想再运行一个回调函数，怎么办？

$.ajax("test.html")

　　.done(function(){ alert("哈哈，成功了！");} )

　　.fail(function(){ alert("出错啦！"); } )

　　.done(function(){ alert("第二个回调函数！");} );

四、为多个操作指定回调函数

deferred对象的另一大好处，就是它允许你为多个事件指定一个回调函数，这是传统写法做不到的。那就是$.when()

$.when($.ajax("test1.html"), $.ajax("test2.html"))

　　.done(function(){ alert("哈哈，成功了！"); })

　　.fail(function(){ alert("出错啦！"); });
//$.ajax("test1.html")和$.ajax("test2.html")，如果都成功了，就运行done()指定的回调函数；如果有一个失败或都失败了，就执行fail()指定的回调函数。

五、普通操作的回调函数接口扩展

它把这一套回调函数接口，从ajax操作扩展到了所有操作。也就是说，任何一个操作----不管是ajax操作还是本地操作，也不管是异步操作还是同步操作----都可以使用deferred对象的各种方法，指定回调函数。

// 一个耗时操作
var wait = function(){
    var task = function(){
        alert('执行了');
    };
    setTimeout(5000);
}

我们为其添加回调,可能会想到$.when();

$.when(wait())

　　.done(function(){ alert("哈哈，成功了！"); })

　　.fail(function(){ alert("出错啦！"); });

但是没起到效果，done立即执行，原因是$.when()接受的是一个deferred对象。所以我们进一步改进吧

var dtd = $.Deferred();
var wait = function(){
    var task = function(){
        alert('执行了');
        dtd.resolve(); // 改变deferred对象的执行状态
    };
    setTimeout(task, 5000);

    return dd;
}

这样wait()返回的是一个defferred对象了，这就可以上链式操作了。

$.when(wait())

　　.done(function(){ alert("哈哈，成功了！"); })

　　.fail(function(){ alert("出错啦！"); });

六、defferred.resolve() 和 defferred.reject()

deferred采用的是Promise的原理。这里我们要清楚一个执行状态的概念。在defferred对象中，有着三种状态，未完成 已完成 已失败

如果执行状态是"已完成"（resolved）,deferred对象立刻调用done()方法指定的回调函数；
如果执行状态是"已失败"，调用fail()方法指定的回调函数；
如果执行状态是"未完成"，则继续等待，或者调用progress()方法指定的回调函数（jQuery1.7版本添加）。

defferred.resolve()是将状态从未完成变为已完成。 ==> done()
defferred.reject()是将状态从未完成变为了已失败

비동기 이해

var dtd = $.Deferred(); // 新建一个Deferred对象
    var wait = function(){

　　　　var tasks = function(){

　　　　　　alert("执行完毕！");

　　　　　　dtd.resolve(); // 改变Deferred对象的执行状态

　　　　};

　　　　setTimeout(tasks,5000);

　　　　return dtd; // 返回promise对象

　　};



　　$.when(wait())

　　.done(function(){ alert("哈哈，成功了！"); })

　　.fail(function(){ alert("出错啦！"); });

　　dtd.resolve();// 这里会立即先执行一次

1. 지연 객체 이해

웹사이트를 개발하는 과정에서 우리는 시간이 오래 걸리는 특정 자바스크립트 작업을 자주 접하게 됩니다. 그중에는 비동기 작업 (예: ajax 서버 데이터 읽기)과 동기 작업 (예: 대규모 배열 탐색) 이 모두 있으며 그 중 어느 것도 즉시 결과를 얻을 수 없습니다. .

일반적인 접근 방식은 콜백 함수 (callback)를 지정하는 것입니다. 즉, 실행이 완료된 후 어떤 함수를 호출해야 하는지 미리 지정하세요.

deferred 객체는 jquery 버전 1.5에서 도입되었습니다. jquery는 콜백을 잘 처리하지 못하여 deferred 객체가 탄생했습니다. deferred 개체는 jQuery에 대한 콜백 함수 솔루션입니다. 영어로 defer는 "지연"을 의미하므로 deferred 객체의 의미는 미래의 특정 시점까지 실행을 "지연"하는 것입니다.

2. Ajax 체인 작업

초기 작성은 다음과 같습니다.

var wait = function(dtd){

　　　　var dtd = $.Deferred(); //在函数内部，新建一个Deferred对象

　　　　var tasks = function(){

　　　　　　alert("执行完毕！");

　　　　　　dtd.resolve(); // 改变Deferred对象的执行状态

　　　　};

　　　　setTimeout(tasks,5000);

　　　　return dtd.promise(); // 返回promise对象

　　};

    var dd = wait();
    // dd.resolve(); // 这里如果使用了的话，就会报错的哦，因为返回deferred.promise（）是无法对状态修改的哦
　　$.when(dd)

　　.done(function(){ alert("哈哈，成功了！"); })

　　.fail(function(){ alert("出错啦！"); });

jquery 버전이 1.5 이하인 경우 반환되는 값은 XHR입니다. Object이므로 체이닝 작업이 불가능하지만, 1.5 이상 버전에서는 Deferred 객체가 반환되어 체이닝 작업이 가능합니다.

var dtd = $.Deferred(); // 新建一个Deferred对象

　　var wait = function(dtd){

　　　　var tasks = function(){

　　　　　　alert("执行完毕！");

　　　　　　dtd.resolve(); // 改变Deferred对象的执行状态

　　　　};

　　　　setTimeout(tasks,5000);

　　　　return dtd;

　　};
var ddd = wait();
// dd.resolve(); //这里报错了哦
$.Deferred(dd)

　　.done(function(){ alert("哈哈，成功了！"); })

　　.fail(function(){ alert("出错啦！"); });

done()은 성공 메소드와 동일하고, 실패()는 오류 메소드와 동일합니다. 체인 라이팅 방식을 채택한 후 코드의 가독성이 크게 향상되었습니다.

3. 동일한 작업에 여러 콜백 함수를 지정하세요

연기된 개체의 가장 큰 장점 중 하나는 여러 콜백 함수를 자유롭게 추가할 수 있다는 것입니다.

위 코드를 예로 들면, ajax 작업이 성공한 후 원래 콜백 함수 외에 다른 콜백 함수도 실행하고 싶은 경우 어떻게 해야 하나요? 🎜

$.when($.ajax( "/main.php" ))

　　.then(successFunc, failureFunc );

🎜4. 여러 작업에 대한 콜백 함수 지정🎜🎜 연기된 개체의 또 다른 큰 이점은 여러 이벤트에 대한 콜백 함수를 지정할 수 있다는 것인데, 이는 기존 작성에서는 불가능합니다. 그게 $.when()🎜

$.ajax( "test.html" )

　　.always( function() { alert("已执行！");} );

🎜 5. 일반 작업을 위한 콜백 함수 인터페이스 확장🎜🎜이 콜백 함수 인터페이스 세트를 ajax 작업에서 모든 작업으로 확장합니다. 즉, 모든 작업(Ajax 작업이든 로컬 작업이든, 비동기 작업이든 동기 작업이든)은 지연된 개체의 다양한 메서드를 사용하여 콜백 함수를 지정할 수 있습니다. 🎜

function pop(arg) {
      if (!arg) {
        console.error('pop title is empty');
      }
      var dfd = $.Deferred() //实例化一个延迟对象 
        ,
        confirmed //记录按下确定或取消 
        , $confirm = $content.find('button.confirm') //确认按钮 
        ,
        $cancel = $content.find('button.cancel'); //取消按钮 

      //定时器轮询，当按下确定或取消时触发删除或取消操作 
      timer = setInterval(function() {
        if (confirmed !== undifined) {
          dfd.resolve(confirmed);
          clearInterval(timer);
          dismiss_pop();
        }
      }, 50);
      //点击确定时更改confirmed状态 
      $confirm.on('click', function() {
        confirmed = true;
      });
      //点击取消时更改confirmed状态 
      $cancel.on('click', function() {
        confirmed = false;
      }); //返回dfd对象
      return dfd.promise();
    }
    $('.delete').click(function() {
      var $this = $(this);
      var index = $this.data('index');
      //当前的id //确定删除
      pop('确定删除？').then(function(res) {
        res ? delete_task(index) : null;
      })
    })

🎜 콜백을 추가하면 $.when();🎜rrreee🎜을 생각할 수 있습니다. 하지만 $.when()이 지연된 객체를 허용하기 때문에 done은 즉시 실행됩니다. 그러니 wait()가 체인에서 작동할 수 있는 지연된 객체를 반환하도록 🎜rrreee🎜 더 개선해 보겠습니다. 🎜rrreee🎜6. deferred.resolve() 및 deferred.reject()🎜🎜deferred는 Promise 원칙을 채택합니다. 여기서 우리는 실행 상태의 개념을 명확히 할 필요가 있습니다. 지연된 개체에는 세 가지 상태가 있습니다. Uncompleted Completed Failed🎜🎜실행 상태가 "Completed"인 경우(해결됨), 지연된 객체는 done() 메서드에 지정된 콜백 함수를 즉시 호출합니다.
실행 상태가 "실패"인 경우 fail() 메소드에 지정된 콜백 함수;
실행 상태가 "Unfinished"인 경우 계속 기다리거나 progress() 메소드에 지정된 콜백 함수(jQuery 1.7 버전에 추가됨). 🎜🎜<code>deferred.resolve()는 상태를 미완료에서 완료로 변경합니다. ==> done()
deferred.reject()는 상태를 미완료에서 실패로 변경합니다. ==> 실패()🎜rrreee🎜 7. deferred.promise();🎜🎜위 메서드에는 몇 가지 문제가 있습니다. 예를 들어 dtd는 전역 변수이므로 언제든지 외부에서 액세스할 수 있습니다. ) 또는 실패()가 두 번 이상 실행되었습니다. 🎜🎜이것은 분명히 우리가 원하는 것이 아니므로 deferred.promise의 도움이 필요합니다. 🎜🎜 그 기능은 원래 지연된 객체에 다른 지연된 객체를 반환하는 것입니다. 후자는 실행 상태 변경과 관련이 없는 메서드(예: done() 메서드 및 failure() 메서드)만 열고 관련 메서드를 차단합니다. 실행 상태를 변경할 수 없도록 메서드(예: 해결() 메서드 및 거부() 메서드)를 변경합니다. 🎜rrreee🎜8.$.Defferred(wait)🎜🎜실행 상태 변경을 방지하는 또 다른 방법은 $.Defferred()🎜rrreee🎜9를 사용하는 것입니다. 지연된 객체 요약🎜🎜🎜🎜$.Deferred()는 지연된 객체를 생성합니다. . 🎜🎜🎜🎜deferred.done()은 작업이 성공할 때 콜백 함수를 지정합니다🎜

deferred.fail() 指定操作失败时的回调函数

deferred.promise() 没有参数时，返回一个新的deferred对象，该对象的运行状态无法被改变；接受参数时，作用为在参数对象上部署deferred接口。

deferred.resolve(args) 手动改变deferred对象的运行状态为"已完成"，从而立即触发done()方法。解决Deferred（延迟）对象，并根据给定的args参数调用任何完成回调函数（doneCallbacks）。

deferred.resolveWith() 解决Deferred（延迟）对象，并根据给定的 context和args参数调用任何完成回调函数（doneCallbacks）。

deferred.reject(args) 这个方法与deferred.resolve()正好相反，调用后将deferred对象的运行状态变为"已失败"，从而立即触发fail()方法。拒绝Deferred（延迟）对象，并根据给定的args参数调用任何失败回调函数（failCallbacks）。这里的args是一个对象。

deferred.rejectWith(context, args) 拒绝Deferred（延迟）对象，并根据给定的 context和args参数调用任何失败回调函数（failCallbacks）。这里的args是一个数组类型。

$.when() 为多个操作指定回调函数。除了这些方法以外，deferred对象还有二个重要方法，上面的教程中没有涉及到。Context（上下文）作为 this对象传递给失败回调函数（failCallbacks ）

deferred.then()

有时为了省事，可以把done()和fail()合在一起写，这就是then()方法。

$.when($.ajax( "/main.php" ))

　　.then(successFunc, failureFunc );

如果then()有两个参数，那么第一个参数是done()方法的回调函数，第二个参数是fail()方法的回调方法。如果then()只有一个参数，那么等同于done()。

deferred.always() 这个方法也是用来指定回调函数的，它的作用是，不管调用的 deferred.resolve()还`是deferred.reject()，最后总是执行。

$.ajax( "test.html" )

　　.always( function() { alert("已执行！");} );

deferred.state() 确定一个Deferred（延迟）对象的当前状态。

"pending": Deferred对象是尚未完成状态 (不是 "rejected" 或 "resolved").
"resolved": Deferred对象是在解决状态，这意味着，deferred.resolve() 或者 deferred.resolveWith()被对象访问和doneCallbacks被访问（或在被调用的过程中）
"rejected": Deferred对象是在被拒绝的状态，这意味着，deferred.reject() 或者 deferred.rejectWith() 被对象访问和failCallbacks被访问（或在被调用的过程中）。

这种方法主要是用在调试，例如，在准备拒绝（reject）一个延迟对象前，判断它是否已经处于 resolved 状态。

十、使用实例

情景1：当用户按下删除弹窗的确定或取消后，把弹窗隐藏，并执行对应的操作（删除或不执行），因为我们不知道用户什么时候会点击按钮，所以不能让弹窗阻塞其他任务的执行。

function pop(arg) {
      if (!arg) {
        console.error('pop title is empty');
      }
      var dfd = $.Deferred() //实例化一个延迟对象 
        ,
        confirmed //记录按下确定或取消 
        , $confirm = $content.find('button.confirm') //确认按钮 
        ,
        $cancel = $content.find('button.cancel'); //取消按钮 

      //定时器轮询，当按下确定或取消时触发删除或取消操作 
      timer = setInterval(function() {
        if (confirmed !== undifined) {
          dfd.resolve(confirmed);
          clearInterval(timer);
          dismiss_pop();
        }
      }, 50);
      //点击确定时更改confirmed状态 
      $confirm.on('click', function() {
        confirmed = true;
      });
      //点击取消时更改confirmed状态 
      $cancel.on('click', function() {
        confirmed = false;
      }); //返回dfd对象
      return dfd.promise();
    }
    $('.delete').click(function() {
      var $this = $(this);
      var index = $this.data('index');
      //当前的id //确定删除
      pop('确定删除？').then(function(res) {
        res ? delete_task(index) : null;
      })
    })

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！