jquery中done与then方法区别

jquery的deferred对象的done方法和then方法都能实现链式调用,但是他们的作用是有区别的,
then方法中如果你传递的方法有返回值,那么他会传递给下一个链式调用的方法。
而done方法与此相反,你传递的方法就算有返回值,done方法也不会把你的返回值传给下一个链式调用的方法的。即:
done返回当前的的deferred object,callback的返回值不会被传递;
then返回一个新的deferred object,callback的返回值会被传递(参考jquery的pipe属性)给新的callback.

var defer = jQuery.Deferred();
        defer.done(function (a, b) { //2,3
            console.log("a = " + a + "b = " + b); //a = 2b = 3
            return a * b;  //6
        }).done(function (result) { //2
            console.log("result = " + result);  //result = 2
        }).then(function (a, b) {  //2,3
            console.log("a = " + a + "b = " + b); //a = 2b = 3
            return a * b;  //6
        }).done(function (result) { //6
            console.log("result = " + result); //result = 6
        }).then(function (a, b) {  //6,undefined
            console.log("a = " + a + "b = " + b);  //a = 6b = undefined
            return a * b; //NaN
        }).done(function (result) {  //NaN
            console.log("result = " + result); //result = NaN
        });
        defer.resolve(2, 3);
		//案例1:
        /**
         * run1
         * 异步过程1
         * 我是数据1
         * run2
         * 异步过程2
         * 我是数据2
         * 异步过程3
         * 我是数据3
         * */
        function run1() {
            console.log('run1');  //1
            return new Promise((resolve, reject) => {
                setTimeout(function () {
                    console.log('异步过程1');//2
                    resolve('我是数据1')
                }, 1000)
            })
        }
        function run2() {
            console.log('run2');  //4
            return new Promise((resolve, reject) => {
                setTimeout(function () {
                    console.log('异步过程2');  //5
                    resolve('我是数据2')
                }, 1000)
            })
        }
        function run3() {
            console.log('run3');
            return new Promise((resolve, reject) => {
                setTimeout(function () {
                    console.log('异步过程3');
                    resolve('我是数据3')
                }, 1000)
            })
        }
        run1().then(function (data) {
            console.log(data)  //3.我是数据1
            return run2()
        }).then(function (data) {
            console.log(data) //6.我是数据2
            return run3()
        }).then(function (data) {
            console.log(data)
        })
		// 案例2
        new Promise(function (resolve, reject) {

            setTimeout(() => resolve(1), 1000);

        }).then(function (result) {

            console.log(result); // 1

            return new Promise((resolve, reject) => { // (*)
                setTimeout(() => resolve(result * 2), 1000);
            });

        }).then(function (result) { // (**)

            console.log(result); // 2

            return new Promise((resolve, reject) => {
                setTimeout(() => resolve(result * 2), 1000);
            });

        }).then(function (result) {

            console.log(result); // 4

        });
		// 案例3
        let run = async function () {
            await run1();
            await run2()
        }

        function run1() {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    resolve()
                    console.log('11')
                }, 2000)
            })
        }
        function run2() {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    resolve()
                    console.log('22')
                }, 2000)
            })
        }
        run()

案例参照:

https://blog.csdn.net/xianengneng/article/details/85001921?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.edu_weight&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.edu_weight

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery 的 `$.when`,`done` 和 `then` 是一组用于处理异步操作的方法。 `$.when` 方法用于等待一个或多个异步操作完成。它接受任意数量的参数,每个参数都是一个需要等待的异步操作对象。当所有异步操作都完成时,`$.when` 返回一个新的 Deferred 对象。 `done` 方法是 `Deferred` 对象的一个回调函数,它在 `$.when` 返回的新的 Deferred 对象解决时被调用。可以将一个或多个回调函数作为参数传递给 `done` 方法。这些回调函数将在异步操作完成时执行,并且可以在函数内部访问异步操作的结果。 `then` 方法是 `Deferred` 对象的另一个回调函数,它在 `done` 方法调用后执行。可以将一个或多个回调函数作为参数传递给 `then` 方法。这些回调函数将在 `done` 方法的回调函数执行后执行,并且也可以在函数内部访问异步操作的结果。 使用 `$.when`,`done` 和 `then` 方法的典型用例是处理多个异步操作的结果。我们可以在 `$.when` 传入多个需要等待的异步操作对象,然后在 `done` 或 `then` 方法分别处理每个异步操作的结果。这样可以确保当所有异步操作都完成时再执行后续的逻辑。 例如,我们可以使用以下代码处理两个异步操作的结果: ``` // 创建两个 Deferred 对象 var deferred1 = $.ajax({ url: 'url1', method: 'GET' }); var deferred2 = $.ajax({ url: 'url2', method: 'GET' }); // 等待两个异步操作完成 $.when(deferred1, deferred2).done(function(result1, result2) { // 处理异步操作的结果 console.log(result1); console.log(result2); }).then(function() { // 执行后续逻辑 console.log('All async operations completed.'); }); ``` 以上代码,`deferred1` 和 `deferred2` 是两个异步操作对象,分别表示两个 AJAX 请求。我们使用 `$.when` 方法等待这两个异步操作完成,并在 `done` 方法处理每个异步操作的结果。在 `then` 方法可以执行其他的逻辑,如打印完成的消息。 总之,`$.when`,`done` 和 `then` 是 jQuery 提供的用于处理异步操作的方法,它们可以帮助我们更方便地管理和处理多个异步操作的结果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值