var deferred = jQuery.Deferred(); 使用示例

jQuery.Deferred() 是 jQuery 提供的一个用于处理异步操作的工具对象。它允许你注册多个回调函数,管理异步任务的成功(resolve)或失败(reject)状态,并支持链式调用。 以下是 var deferred = jQuery.Deferred(); 的几种典型使用示例,从基础用法到高级场景:

  1. 基础用法:手动控制异步状态 这是最直接的用法,创建一个 Deferred 对象,并在异步操作完成时手动改变其状态。
javascript 复制代码
// 1. 创建 Deferred 对象
var deferred = jQuery.Deferred();

// 2. 绑定回调函数
// done: 当状态变为 resolved 时执行
deferred.done(function(value) {
    console.log("成功: " + value);
});

// fail: 当状态变为 rejected 时执行
deferred.fail(function(reason) {
    console.log("失败: " + reason);
});

// always: 无论成功还是失败都会执行
deferred.always(function() {
    console.log("操作结束");
});

// 3. 模拟一个异步操作 (例如 setTimeout)
setTimeout(function() {
    var isSuccess = true; // 模拟操作结果
    
    if (isSuccess) {
        // 改变状态为 resolved,触发 done 和 always
        deferred.resolve("数据加载完成");
    } else {
        // 改变状态为 rejected,触发 fail 和 always
        deferred.reject("网络错误");
    }
}, 1000);
  1. 封装通用异步函数(推荐模式) 在实际开发中,通常不会在全局直接操作 Deferred 对象,而是将其封装在函数内部,并返回 ‌Promise‌ 对象。这样可以防止外部代码随意修改异步任务的状态(即防止外部调用 resolve 或 reject)。
javascript 复制代码
function fetchData(url) {
    // 创建 Deferred 对象
    var deferred = jQuery.Deferred();

    // 执行异步操作 (这里用 $.ajax 举例,其实 $.ajax 本身已返回 Promise)
    // 假设这是一个自定义的异步逻辑
    setTimeout(function() {
        if (url) {
            deferred.resolve({ data: "内容来自 " + url });
        } else {
            deferred.reject("URL 不能为空");
        }
    }, 500);

    // 返回 promise 对象
    // promise 对象只暴露 .done(), .fail(), .then() 等方法,
    // 隐藏了 .resolve(), .reject() 等改变状态的方法
    return deferred.promise();
}

// 使用封装好的函数
fetchData("api/test")
    .done(function(result) {
        console.log("获取成功:", result);
    })
    .fail(function(error) {
        console.error("获取失败:", error);
    });
  1. 使用 .when()并行处理多个异步任务Deferred对象可以与.when() 并行处理多个异步任务 Deferred 对象可以与 .when()并行处理多个异步任务Deferred对象可以与.when() 配合使用,等待多个异步操作全部完成后执行回调。
javascript 复制代码
var d1 = jQuery.Deferred();
var d2 = jQuery.Deferred();

// 模拟两个独立的异步任务
setTimeout(function() { d1.resolve("任务1完成"); }, 1000);
setTimeout(function() { d2.resolve("任务2完成"); }, 2000);

// 等待所有任务完成
jQuery.when(d1, d2).done(function(val1, val2) {
    console.log(val1); // "任务1完成"
    console.log(val2); // "任务2完成"
    console.log("所有任务已结束");
});
  1. 链式调用与状态传递 (then) then 方法不仅可以注册回调,还可以对返回值进行处理,并将结果传递给下一个回调。
javascript 复制代码
var deferred = jQuery.Deferred();

deferred.then(
    // 成功回调
    function(value) {
        console.log("第一步: " + value);
        return value + " -> 处理后"; // 返回值会传递给下一个 then 或 done
    },
    // 失败回调
    function(reason) {
        console.log("出错: " + reason);
        return jQuery.Deferred().reject("新错误信息"); // 可以返回一个新的 rejected promise
    }
).done(function(finalValue) {
    console.log("最终结果: " + finalValue);
});

// 触发 resolve
deferred.resolve("初始数据");

核心方法总结

注意事项

1.状态不可逆‌:一旦 Deferred 对象被 resolve 或 reject,其状态就固定了,再次调用 resolve 或 reject无效。

2.立即执行‌:如果在状态已经确定后(例如已经 resolve)再添加 done 回调,该回调会‌立即执行‌。

3.现代替代方案‌:虽然 jQuery Deferred 功能强大,但在现代 JavaScript 开发中,原生的 Promise 和 async/await 已成为标准。如果项目不依赖旧版 jQuery,建议优先使用原生 Promise。

相关推荐
Setsuna_F_Seiei8 小时前
前端转型 Agent 开发 04 之 MCP 与 Skill(赋予 Agent 更广工作能力)
前端·agent
刘发财10 小时前
前端2秒生成500页矢量PDF,rust真的强到没朋友
前端·javascript·rust
找方案10 小时前
AI+人力资源:AI招聘面试的兴起与争议
人工智能·面试·职场和发展
郑州光合科技余经理10 小时前
国际版外卖系统:税率字段怎么和订单主流程解耦
android·java·开发语言·前端·后端·php·ai编程
梦想平凡11 小时前
百游棋牌源代码开发搭建教程(十):隔离部署、备份恢复与双端验收
java·前端·javascript·数据库·源代码管理
yume_sibai12 小时前
06-Rust Web 开发实战(Axum 框架 + 数据库 + JWT 认证 + 中间件 + 部署)
前端·数据库·rust
计算机魔术师13 小时前
特朗普上台打给黄仁勋:AI末日论是骗局,我们绝不让它发生
前端
troy12813 小时前
Python 基础语法(八):Web 后端开发、数据分析与可视化、网络爬虫、人工智能 / 大模型应用
前端·python·数据分析
计算机魔术师14 小时前
CEO说要慢下来,黑客说别做梦了——同一篇论文,两种命运
前端
kyriewen14 小时前
我花3天抓了一个幽灵bug,凶手藏在第4层
前端·javascript·程序员