您的位置：鳄鱼CMS > jquery callback jQuery.Callbacks()方法

jquery callback jQuery.Callbacks()方法

2023-06-02 22:31 jQuery教程

jquery callback

jQuery callback 是一种异步编程技术，它可以让你在执行一个函数之后，在函数完成后再执行另一个函数。这样做的好处是，你可以在不影响其他代码的情况下，让某些代码在特定时间执行。

jQuery callback 函数有助于提高代码的可读性和可维护性。它使得你能够将复杂的逻辑分解成一些小的、独立的函数，这样就能够更好地理解代码。此外，回调函数也有助于避免重复代码，因为你可以将相同的逻辑封装到一个函数中，然后在需要时重用该函数。

// 例子1: 使用回调函数来打印字符串
function printString(str, callback) {
    console.log(str);

    if (callback && typeof(callback) === "function") {
        callback();
    }
}
printString("Hello World!", function() { console.log("Done!"); });  // 输出: Hello World! Done! 

 // 例子2: 使用回调函数来打印字符串并传递参数 
function printStringWithParam(str, param, callback) {  
    console.log(str + param);

    if (callback && typeof(callback) === "function") {  
        callback();  
    }  
}  
printStringWithParam("Hello ", "World!", function() { console.log("Done!"); }); // 输出: Hello World! Done!

jQuery.Callbacks()方法

jQuery 杂项方法

实例

向 $.Callbacks 的列表添加回调函数

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

定义和用法

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

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

语法

$.Callbacks( flags )

参数	描述
flags	可选。 String类型一个用空格标记分隔的可选列表,用来改变回调列表中的行为

实例

支持的 Flags 参数

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

参数	描述
once	确保这个回调列表只执行一次
memory	缓存上一次fire时的参数值，当add()添加回调函数时，直接用上一次的参数值立刻调用新加入的回调函数
unique	确保一次只能添加一个回调，不会重复添加
stopOnFalse	某个回调函数返回false之后中断后面的回调函数

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

实例

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

})

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

实例

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

})

下面是 $.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( "stopOnFalse" ) 的一个例子

实例

$(function () {
    function fn1( value ) {
        alert( value );
        return false;
     }
    function fn2( value ) {
        fn1( "fn2 says: " + value );
        return false;
    }
    var callbacks = $.Callbacks( "stopOnFalse" );
    callbacks.add( fn1 );
    callbacks.fire( "foo" );
    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" );

})

$.Callbacks 方法也可以被分离, 例如：

实例

$(function () {
    function fn1( value ) {
        alert( value );
    }
    var callbacks = $.Callbacks(),
    add = callbacks.add,
    remove = callbacks.remove,
    fire = callbacks.fire;
    add( fn1 );
    fire( "hello world" );
    remove( fn1 );

})

$.Callbacks, $.Deferred 和 Pub/Sub

pub / sub（观察者模式）背后的一般思路是促进应用程序的松散耦合和高效通信。观察家也被称为订阅者，它指向观察对象。观察者（Publisher）事件发生时通知用户。

作为 $.Callbacks() 的创建组件的一个演示，只使用回调函数列表，就可以实现 Pub/Sub 系统。将 $.Callbacks 作为一个文章队列，可以向下面这样，实现文章的发布和订阅：

实例

$(function () {
    function fn1( value ) {
      alert( value );
      return false;
    }

    function fn2( value ) {
      fn1( "fn2 says: " + value );
      return false;
    }
    var topics = {};
    jQuery.Topic = function( id ) {
        var callbacks,
            method,
            topic = id && topics[ id ];
        if ( !topic ) {
            callbacks = jQuery.Callbacks();
            topic = {
                publish: callbacks.fire,
                subscribe: callbacks.add,
                unsubscribe: callbacks.remove
            };
            if ( id ) {
                topics[ id ] = topic;
            }
        }
        return topic;
    };
    // 订阅者
    $.Topic( "mailArrived" ).subscribe( fn1 );
    $.Topic( "mailArrived" ).subscribe( fn2 );
    $.Topic( "mailSent" ).subscribe( fn1 );
    // 发布者
    $.Topic( "mailArrived" ).publish( "hello world!" );
    $.Topic( "mailSent" ).publish( "woo! mail!" );

})

进一步改进使用 $.Deferreds，可以保证当特定的任务被完成（或被解决）时，发布者只能向订阅者发布通知。参见下面的示例代码：

实例

$(function () {
    function fn1( value ) {
      alert( value );
      return false;
    }

    function fn2( value ) {
      fn1( "fn2 says: " + value );
      return false;
    }
    var topics = {};
    jQuery.Topic = function( id ) {
        var callbacks,
            method,
            topic = id && topics[ id ];

        if ( !topic ) {
            callbacks = jQuery.Callbacks();
            topic = {
                publish: callbacks.fire,
                subscribe: callbacks.add,
                unsubscribe: callbacks.remove
            };
            if ( id ) {
                topics[ id ] = topic;
            }
         }
         return topic;
     };
     // 订阅 mailArrived 通知
     $.Topic( "mailArrived" ).subscribe( fn1 );
     // 创建一个新对象替代延迟$.Deferreds
     var dfd = $.Deferred();
     // 定义一个新的文章 (不直接发布)
     var topic = $.Topic( "mailArrived" );
     // 当延迟被受理, 发布一个通知给订阅者
     dfd.done( topic.publish );

     // 完成。
     dfd.resolve( "已经被发布!" );
})

jQuery 杂项方法

阅读全文

以上是鳄鱼CMS为你收集整理的jquery callback jQuery.Callbacks()方法全部内容。

声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。

jquery callback jQuery callbacks.add() 方法

2023-06-12 jQuery教程

jQuery callbacks.add() 方法jQuery 杂项方法实例添加函数到回调函数列表$(function () {var foo = function( value ) { alert( ...
jQuery deferred.state() 方法

2023-04-11 jQuery教程

jQuery deferred.state() 方法jQuery 杂项方法定义和用法deferred.state() 函数用于确定一个Deferred（延迟）对象的当前状态。注...
jquery not方法 jQuery.now()方法

2023-04-07 jQuery教程

jQuery.now()方法jQuery 杂项方法实例返回当前时间的Unix时间戳 $(function () {document.body.innerHTML = $.now();})定义和用...
jQuery 选择器 (selector1,selector2,selectorN)

2023-05-28 jQuery教程

jQuery 选择器 (selector1,selector2,selectorN) jQuery 选择器定义和用法jQuery 的selector1,selector2,selectorN选择器(联合选...
jquery新增属性 jQuery 3.0 新增了哪些特性？(jQuery 3 所引入的那些最重要的变化)

2023-03-10 jQuery教程

jQuery 的横空出世，至今已有十个年头了，而它的长盛不衰显然不是没有理由的。jQuery 提供了极为友好的接口，使得开发者们可以方...