文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Jquery回调对象与延迟对象用法详解

2024-04-02 19:55

关注

一、回调对象Callbacks

jQuery 1.7 版本中新增的 jQuery.Callbacks() 函数,返回一个多功能对象,此对象提供了一种强大的方法来管理回调列表。它能够增加、删除、触发、禁用回调函数。

1、定义和用法

$.Callbacks() 指一个多用途的回调函数列表对象,提供了一种强大的方法来管理回调函数列对。

提示: $.Callbacks 是在 jQuery 内部使用,如为 .ajax,$.Deferred 等组件提供基础功能的函数。它也可以用在类似功能的一些组件中,如自己开发的插件。

$(function () { 
    function fn1( value ) {
        alert( value );
    }
    function fn2( value ) {
        fn1("fn2 says: " + value);
        return false;
    }
    var callbacks = $.Callbacks();
    callbacks.add( fn1 );    
    callbacks.fire( "foo!" );// 输出: foo!    
    callbacks.add( fn2 );
    callbacks.fire( "bar!" );// 先执行f1,再执行f2。输出: bar!, fn2 says: bar!
})

2、支持的 Flags 参数

这个 flags 参数是 $.Callbacks() 的一个可选参数, 结构为一个用空格标记分隔的标志可选列表,用来改变回调列表中的行为 (比如. $.Callbacks( 'unique stopOnFalse' ))。 
以下是可用的 flags:

下面是 $.Callbacks( "unique" ) 的一个例子

$(function () { 
    function fn1( value ) {
        alert( value );
    }
    function fn2( value ) {
        fn1("fn2 says: " + value);
        return false;
    }
    var callbacks = $.Callbacks( "unique" );
    callbacks.add( fn1 );
    callbacks.fire( "foo" );
    callbacks.add( fn1 ); // repeat addition
    callbacks.add( fn2 );
    callbacks.fire( "bar" );
    callbacks.remove( fn2 );
    callbacks.fire( "foobar" );
    
})

$.Callbacks() 支持一个列表设置多个flags(标识)而不仅仅是一个,有一个累积效应,类似"&&"。 
下面是 $.Callbacks( 'unique memory' ) 的一个例子

$(function () { 
    function fn1( value ) {
        alert( value );
        return false;
    }
     
    function fn2( value ) {
        fn1( "fn2 says: " + value );
        return false;
    } 
    var callbacks = $.Callbacks( "unique memory" );
    callbacks.add( fn1 );
    callbacks.fire( "foo" );
    callbacks.add( fn1 ); // repeat addition
    callbacks.add( fn2 );
    callbacks.fire( "bar" );
    callbacks.add( fn2 );
    callbacks.fire( "baz" );
    callbacks.remove( fn2 );
    callbacks.fire( "foobar" ); 
    
})

3、方法清单:

二、延迟对象:deferred

在jQuery 1.5中新增了 Deferred 延迟对象,它是通过调用 jQuery.Deferred() 方法来创建的可链接的实用对象。它可注册多个回调函数到回调列表,调用回调列表并且传递异步或同步功能的成功或失败的状态。 
延迟对象是可链接的,类似于一个 jQuery 对象可链接的方式,区别于它有自己的方法。在创建一个 Deferred 对象之后,您可以使用以下任何方法,直接链接到通过调用一个或多个的方法创建或保存的对象。

1、$.Deferred()定义和用法

$.Deferred() 是一个构造函数,用来返回一个链式实用对象方法来注册多个回调,并且调用回调队列,传递任何同步或异步功能成功或失败的状态。

设定两个延时时间是随机的定时器,分别用于解决(resolve)和拒绝(reject)延迟对象

$(function () { 
    function asyncEvent(){
        var dfd = new jQuery.Deferred();
        // 在一个随机的时间间隔之后 Resolve (解决状态)
        setTimeout(function(){
            dfd.resolve("欢呼");
        }, Math.floor(400+Math.random()*2000));

        // 在一个随机的时间间隔之后 reject (拒绝状态)
        setTimeout(function(){
            dfd.reject("对不起");
        }, Math.floor(400+Math.random()*2000));

        // 每半秒显示一个"working..."消息
        setTimeout(function working(){
            if ( dfd.state() === "pending" ) {
                dfd.notify("working... ");
                setTimeout(working, 500);
            }
        }, 1);
        // 返回 Promise 对象,调用者不能改变延迟对象
        return dfd.promise();
    }
    // 为异步函数附加一个done, fail, 和 progress 处理程序
    $.when( asyncEvent() ).then(
        function(status){
            alert( status+', 事情进展顺利' );
        },
        function(status){
            alert( status+', 这次你失败了' );
        },
        function(status){
            $("body").append(status);
        }
    );
})

2、deferred.promise():

返回Deferred(延迟)的Promise对象。

3、.promise():

返回一个 Promise 对象用来观察当某种类型的所有行动绑定到集合,排队与否还是已经完成。

语法:.promise( [type ] [, target ] )

type:String类型 需要待观察队列类型。

target:PlainObject类型 将要绑定 promise 方法的对象。

在一个没有激活动画的集合上调用 .promise()

$(function () { 
    var div = $( "
" );
    div.promise().done(function( arg1 ) {
        alert( this === div && arg1 === div );//弹出 "true"
    });
})

当所有的动画结束时(包括那些在动画回调函数和之后添加的回调函数中初始化的动画),受理(Resolve)返回的 Promise。

$(function () { 
    $( "button" ).on( "click", function() {
        $( "p" ).append( "已开始..." );

        $( "div" ).each(function( i ) {
            $( this ).fadeIn().fadeOut( 100 * ( i + 1 ) );
        });

        $( "div" ).promise().done(function() {
            $( "p" ).append( " 完成! " );
        });
    });
})

4、jQuery.when():

提供一种方法来执行一个或多个对象的回调函数, Deferred(延迟)对象通常表示异步事件。

5、方法清单:

到此这篇关于Jquery回调对象与延迟对象的文章就介绍到这了。希望对大家的学习有所帮助,也希望大家多多支持编程网。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯