$.Deferred的使用

传统的异步操作会在操作完成之后,使用回调函数传回结果,而回调函数中则包含了后续的工作。这也是造成异步编程困难的主要原因。

嵌套式回调:

$('ele1').animate({
    opacity: '.5'
}, 4000, function() {
    $('ele2').animate({
        width: '100px'
    }, 2000, function() {
        $('ele3').animate({
            height: '0'
        }, 2000);
    });
});
上面的代码编程逻辑也是正确的,但是针对这样的异步嵌套的回调逻辑,当我们的嵌套越多,代码结构层级会变得越来越深。首先是阅读上会变得困难,其次是强耦合,接口变得不好扩展。我们需要一种模式来解决这种问题,这就是Promises所要做的事情。  为了让前端们从回调的地狱中回到天堂, jQuery 也引入了 Promise 的概念。 Promise 是一种令代码异步行为更加优雅的抽象,有了它,我们就可以像写同步代码一样去写异步代码。这个东东看起来很复杂,实际上我们只要抓住核心的使用就可以了
通过$.Defeered处理:

$('button:last').click(function() {

        function animate1() {
            var dtd = $.Deferred(); // 生成Deferred对象
            $("#block3").animate({
                width: "50%"
            }, 2000, function() {
                dtd.resolve(); // 改变Deferred对象的执行状态
            });
            return dtd;
        }

        function animate2() {
            var dtd = $.Deferred(); // 生成Deferred对象
            $("#block4").animate({
                width: "50%"
            }, 2000, function() {
                dtd.resolve(); // 改变Deferred对象的执行状态
            });
            return dtd;
        }

        var anim = animate1();

        anim.then(function() {
            $("#block3").text('block3动画动画直接结束');
            return animate2();
        }).then(function() {
            $("#block4").text('block4动画动画直接结束');
        });

    });
通过$.Deferred处理过的代码,很明显没有了回调的嵌套,虽然代码量看起来多了点,但是实际上,每一个代码执行部分都被封装了起来,只留了Deferred的接口处理了,等于是我们把 执行的流程控制交给了Deferred ,这样的好处就是我们在写嵌套函数的时候,可以用deferred提供的管道风格编写同步代码了。

var dtd = $.Deferred();  //创建
dtd.resolve();          //成功
dtd.then()              //执行回调




  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值