3-11 stopOnFalse
本节编程练习不计算学习进度,请电脑登录imooc.com操作

stopOnFalse

stopOnFalse: 当一个回调返回false 时中断调用

function fn1(value) {
  console.log(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");

结果虽然fn1被添加到了回调列表,但是因为fn1返回了false,那么意思之后的回调都不会被调用了。如果还有fn3,在f2上返回false,fn3也将不会被调用。

foo
bar

 

这个设计我们只要控制好函数返回的处理的布尔值,通过这个值用来判断是否需要下一个遍历

if (list[firingIndex](data) === false && options === 'stopOnFalse') {
  break;
}

源码可以如下:

function Callbacks(options) {
  var list = [];
  var self;
  var firingStart;
  var memory;

  function _fire(data) {
    memory = options === 'memory' && data;
    firingIndex =
      firingStart || 0;
    firingStart = 0;
    firingLength = list.length;
    for (; list && firingIndex < firingLength; firingIndex++) {
      if (list[firingIndex](data) === false && options === 'stopOnFalse') {
        break;
      }
    }
  }

  self = {
    add: function(fn) {
      var start = list.length;
      if (options == 'unique') {
        if (-1 === list.indexOf(fn)) {
          list.push(fn)
        }
      } else {
        list.push(fn)
      }
      if (memory) {
        firingStart = start; //获取最后一值
        _fire(memory);
      }
    },
    fire: function(args) {
      if (list) {
        _fire(args)
      }
    }
  }
  return self;
}

以上是几种单独的处理情况的用法,我们可以看到jQuery都是组合使用的,最常见的就是

jQuery.Callbacks("once memory")的组合了,其实以上的思路都讲解过了,无非就是组合起来的时候要考虑一些判断了。

 

任务

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <script src="http://img1.sycdn.imooc.com//down/540812440001e40e00000000.js" type="text/javascript"></script>
  6. <script src="http://img1.sycdn.imooc.com//down/541f6ff70001a0a500000000.js" type="text/javascript"></script>
  7. <title></title>
  8. </head>
  9. <body>
  10.  
  11. <script type="text/javascript">
  12.  
  13. function Callbacks(options) {
  14. var list = [];
  15. var self;
  16. var firingStart;
  17. var memory;
  18.  
  19. function _fire(data) {
  20. memory = options === 'memory' && data;
  21. firingIndex =
  22. firingStart || 0;
  23. firingStart = 0;
  24. firingLength = list.length;
  25. for (; list && firingIndex < firingLength; firingIndex++) {
  26. if (list[firingIndex](data) === false && options === 'stopOnFalse') {
  27. break;
  28. }
  29. }
  30. }
  31.  
  32. self = {
  33. add: function(fn) {
  34. var start = list.length;
  35. if (options == 'unique') {
  36. if (-1 === list.indexOf(fn)) {
  37. list.push(fn)
  38. }
  39. } else {
  40. list.push(fn)
  41. }
  42. if (memory) {
  43. firingStart = start; //获取最后一值
  44. _fire(memory);
  45. }
  46. },
  47. fire: function(args) {
  48. if (list) {
  49. _fire(args)
  50. }
  51. }
  52. }
  53. return self;
  54. }
  55.  
  56.  
  57. function fn1( value ){
  58. show( value );
  59. return false;
  60. }
  61.  
  62. function fn2( value ){
  63. fn1( "fn2 says: " + value );
  64. return false;
  65. }
  66.  
  67. var callbacks = Callbacks('stopOnFalse');
  68. callbacks.add(fn1);
  69. callbacks.fire("foo1");
  70.  
  71. callbacks.add(fn2);
  72. callbacks.fire("foo2");
  73.  
  74.  
  75.  
  76.  
  77. </script>
  78.  
  79. </body>
  80. </html>
下一节