jQuery学习笔记——回调支持

本文链接：https://blog.csdn.net/Lee_Cristina/article/details/103943171

简介

- 回调支持的基本用法

从 jQuery 1.7开始，jQuery提供了回调支持

回调支持的基本用法

创建Calbacks对象

jQuery.Callbacks(flags)
根据创建的flags创建并返回Callbacks对象，Callbacks对象表示一个回调函数列表

管理回调函数

add(callbacks)
将一个或多个回调函数添加到Callbacks对象中，Callbacks参数表示将要添加的回调函数或回调函数数组
disable( )
禁用Callbacks
empty( )
从Callbacks对象中删除所有回调函数
fire(arguments)
使用指定参数arguments激发Callbacks对象中所有回调函数
fired( )
判断Callbacks对象中的回调函数是否被调用了至少一次
has(callback)
判断Callbacks对象中是否包含callback回调函数
lock( )
将Callbacks对象锁定在当前状态
locked( )
判断Callbacks对象是否处于锁定状态
remove(callbacks)
从Callbacks对象中删除一个或者多个回调函数。Callbacks参数表示将要被删除的回调函数或回调函数数组

<body>
  <script src="./jquery-1.12.4.js"></script>
  <script>
  
  function fn1(strvalue){
    document.writeln('fn1函数输出:' + strvalue + "<br />");
  }
  function fn2(strvalue){
    document.writeln('fn2函数输出:' + strvalue + "<br />");
  }
  function fn3(){
    document.writeln('New time')
  }

  // 创建回调函数列表
  var Callbacks = $.Callbacks();
  // 向回调函数列表添加一个回调函数
  Callbacks.add(fn1);
  Callbacks.fire('早上好呀！');
  // 再次添加
  Callbacks.add(fn2);
  Callbacks.fire('中午好');
  // 从回调函数列表中删除fn1
  Callbacks.remove(fn1);
  Callbacks.fire('晚上好！');

  // empty()
  Callbacks.empty();
  Callbacks.add(fn3);
  Callbacks.fire();

  // fired()
  console.log(Callbacks.fired());

  // has()
  console.log(Callbacks.has(fn1));
  
  </script>
</body>

创建Callbacks对象支持的选项

选项：

once
保证整个Callbacks对象只能被fire( )一次

 // 创建回调函数列表
 var Callbacks = $.Callbacks("once");
 // 向回调函数列表添加一个回调函数
 Callbacks.add(fn1);
 Callbacks.fire('早上好呀！');
 // 再次添加
 Callbacks.add(fn2);
 Callbacks.fire('中午好');     // 结果：fn1函数输出:早上好呀！

memory
缓存前一次调用的参数。当执行完fire( )之后添加的任何回调函数，jQuery将会自动缓存起来，并以上一次调用时传入的参数作为参数自动激发新添加的回调函数

  // 创建回调函数列表
  var Callbacks = $.Callbacks("memory");
  // 向回调函数列表添加一个回调函数
  Callbacks.add(fn1);
  Callbacks.fire('早上好呀！');
  // 再次添加
  // 结果：
  // fn1函数输出:早上好呀！
  // fn2函数输出:早上好呀！
  Callbacks.add(fn2);

unique
保证一个回调函数最多只被添加一次，也就是说，Callbacks对象中不会出现重复的回调函数

  // 创建回调函数列表
  var Callbacks = $.Callbacks('unique');
  // 向回调函数列表添加一个回调函数
  Callbacks.add(fn1);
  Callbacks.fire('早上好呀！');
  // 再次添加
  Callbacks.add(fn2);
  Callbacks.add(fn1);
  Callbacks.add(fn1);
  Callbacks.add(fn1);

  Callbacks.fire('好呀！');
  // 结果
  //fn1函数输出:早上好呀！
  //fn1函数输出:好呀！
  //fn2函数输出:好呀！

stopOnFalse
当某回调函数返回false时，立即中断调用，即只要其中任意一个回调函数返回了false，就会导致后面的回调函数不会被调用

<body>
  <script src="./jquery-1.12.4.js"></script>
  <script>
  function fn1(strvalue){
    document.writeln('fn1函数输出:' + strvalue + "<br />");
    return false;
  }
  function fn2(strvalue){
    document.writeln('fn2函数输出:' + strvalue + "<br />");
    return false;
  }
  // 创建回调函数列表
  var Callbacks = $.Callbacks('stopOnFalse');
  // 向回调函数列表添加一个回调函数
  Callbacks.add(fn1);
  Callbacks.fire('早上好呀！');
  // 再次添加
  Callbacks.add(fn2);
  Callbacks.add(fn1);
  Callbacks.add(fn1);
  Callbacks.add(fn1);

  Callbacks.fire('好呀！');
  // 结果为：
  // fn1函数输出:早上好呀！
  // fn1函数输出:好呀！
  </script>
</body>