JS问题整理与思考--是否用过jQuery的Deferred

jQuery 1.5的变化

  • 无法改变JS异步和单线程的本质
  • 只能从写法上杜绝callBack这种形式
  • 它是一种语法糖形式,但是解藕了代码
  • 很好的体现:开放封闭原则(对扩展开发,对修改封闭)
    
// jQuery1.5之前
var ajax = $.ajax({
    url:'XX',
    success:function () {
        console.log(11);
        console.log(22);
        console.log(33);
    },
    error:function () {
        console.log(44);
    }
})
console.log(ajax);  // 返回一个XHR对象

// jQuery1.5之后
var ajax = $.ajax('data.json')
ajax.done(function () {
    console.log(111);
})
.fail(function () {
    console.log(444);
})
.done(function () {
    console.log(222);
})
console.log(ajax)   // 返回一个defrred对象
// ---    或者
var ajax = $.ajax('./mock.json')
ajax.then(function (res) {
    console.log(res);
},function () {
    console.log(222);
}).then(function () {
    console.log(333);
},function () {
    console.log(444);
})

模拟1.5之前处理方法

var wait = function () {
console.log(111);
var task = function () {
    console.log('执行完成')
    // 1
    // 2
    // 3
}
setTimeout(task, 200)
}
wait()

模拟1.5之后处理方法

function waitHandle() {
    var dtd = $.Deferred()
    var wait = function (dtd) {
        var task = function () {
            console.log('执行完成')

            // 成功
            dtd.resolve()
            // 失败
            // dtd.reject()
        }
        setTimeout(task, 2000)

        return dtd
    }
    return wait(dtd)
}

var w = waitHandle()
w.then(function () {
    console.log(111);
},function () {
    console.log(222);
}).then(function () {
    console.log(333);
},function () {
    console.log(444);
})

状态判断不应该被主动修改

reject/resolve和then不应该在一起用。一个是系统判断,一个是被动接受状态。

function waitHandle() {
    var dtd = $.Deferred()
    var wait = function (dtd) {
        var task = function () {
            console.log('执行完成')
            dtd.resolve()
        }
        setTimeout(task, 2000)

        return dtd.promise()    // 这里返回promise而不是直接返回 deferred对象
    }
    return wait(dtd)
}

var w = waitHandle()
$.when(w)
.then(function () {
    console.log(111);
},function () {
    console.log(222);
})
// w.reject()   // 执行这句话会报错,不应该主动去触发修改返回状态。
  • jQuery1.5对ajax的改变
  • 如何简单的封装/使用Defrred
  • Promise和Deferred的区别

随机浏览