$.Deferred .resolve() $.when() 原理示例

YUQI的博客

已于 2022-04-28 16:10:18 修改

阅读量809

点赞数

分类专栏：笔记小代码文章标签： javascript

于 2022-04-23 15:56:25 首次发布

本文链接：https://blog.youkuaiyun.com/glodream/article/details/124364544

版权

小代码同时被 2 个专栏收录

11 篇文章

订阅专栏

笔记

3 篇文章

订阅专栏

这篇博客探讨了jQuery中$.when和Deferred对象的使用，重点在于如何结合它们处理异步操作。文中通过示例解释了如何创建并使用Deferred对象，以及何时使用.done()、.fail()和.then()方法。作者指出，在不需要外部干扰的情况下，可以直接使用$.when配合.done()，而.when().then()组合可以提供更简洁的代码。同时，文中也提醒注意返回Deferred对象以确保异步任务完成后再执行后续操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用$.when 必有resolve
ajax，则直接done,或$.when($.ajax()).done即可
when后 then代替done、fail更简洁
一般场景无需.promise()，如果deffered的被在外部resolve干扰可考虑下

    var dtd = $.Deferred(); // 新建一个deferred对象
　　var wait = function(dtd){
        var tasks = function(){
             alert("执行完毕！");
             dtd.resolve(); // 改变deferred对象的执行状态
             return ;//结束当前function，不再执行下方
             alert('还在进行..');
　　　　};
　　　　setTimeout(tasks,5000);//延迟、异步类的命令代码
       alert('1');
       return;//结束也能触发$.when.done，但是因为没有return dtd
　　　　return dtd;//只有返回dtd，才会等待setTimeout里的.resolve()后执行when.done
　　};
    $.when(wait(dtd))
　　.done(function(){ alert("哈哈，成功了！"); })
　　.fail(function(){ alert("出错啦！"); });

也可以将事件和$.Deferred直接简写成下方的样式

　　$.when(function(){
        var dtd = $.Deferred();//新建deferred对象，放到函数内 可防止外部干扰，代码更干净
　　　　var tasks = function(){
　　　　　　alert("执行完毕！");
　　　　　　dtd.resolve(); // 改变deferred对象的执行状态
            return ;//终止当前函数里的下方代码
            alert('还在进行..');
　　　　};
　　　　setTimeout(tasks,5000);
        alert('1');
        //此处加return; 则when得不到dtd对象，就无法等待Deferred
　　　　return dtd;//$.when只会通过deferred对象等待当前函数里的异步和延迟命令
　　}())
　　.then(function(){ alert("胜败在天了"); });
    alert('我也完成了，等待when登场弹窗'); //非阻塞