Question

我想在javascript中创建一个全局计时器对象，然后能够动态添加回调。这样我就可以在我的脚本中使用一个全局计时器以一定的间隔执行所有操作，而不是通过使用倍数来浪费资源。

这就是我希望能够把事情拼凑在一起的方式：

var timer = new function() { 
 clearInterval( this.interval );

 //[1] At this point I want the Callbacks to be run

 var self = this;
 setTimeout(function() {self.timer()}, 200);
}

function otherObject = new function() {
    //When created I want to bind my object's function called cb to the global timer at [1]
}

otherObject.prototype.cb = function() {
    //Stuff that should be done every time the timer is run
}

var someObject = new otherObject();

我如何能够将任何数字函数（大多数是其他对象中的函数）绑定到我的计时器间隔运行？

Answer 1

创建一个GlobalTimer对象，使其能够注册回调函数并取消自身。

function makeGlobalTimer(freq) {
  freq = freq || 1000;

  // array of callback functions
  var callbacks = [];

  // register the global timer
  var id = setInterval(
    function() {
      var idx;
      for (idx in callbacks) {
        callbacks[idx]();
      }
    }, freq);

  // return a Global Timer object
  return {
    "id": function() { return id; },
    "registerCallback": function(cb) {
      callbacks.push(cb);
    },
    "cancel": function() {
      if (id !== null) {
        clearInterval(id);
        id = null;
      }
    }
  };
}

var gt = makeGlobalTimer(500);
gt.registerCallback(function() {
                      console.log("a");
                    });

gt.registerCallback(function() {
                      console.log("b");
                    });

setTimeout(function() { gt.cancel(); }, 5000);

Answer 2

让间隔触发事件。订阅功能可以监听事件（或不是），并根据自己的逻辑选择是否开火。

执行此操作的{p> The jQuery way将是：

(function() {
  setInterval(function() {
    $(document).trigger('heartbeat-of-the-universe');
  }, 200);
})();

然后在otherObject内......

$(document).bind('heartbeat-of-the-universe', this.cb);

显然还有其他实现事件的方式。

正如评论中指出的google链接一样，这不是具有最高性能的选项。它灵活而且相对宽容。

Answer 3

只是aekeus方法的略微修改版本。现在暂停 - ＆amp;可恢复的计时器，第三个arguments和一个更快的callbacks - 循环：

function Interval(callback, freq) {

    // array of callback functions
    var args = arguments,
        callbacks = [callback],
        paused = false;

    // register the global timer
    var id = setInterval(function () {
        if(paused) return;
        var len = callbacks.length,
            i = len;
        while(i--) callbacks[len - 1 - i].apply(Interval, Array.prototype.slice.call(args, 2, args.length));
    }, freq);

    // return a Global Timer object
    return {
        id: function () {
            return id;
        },
        add: function (cb) {
            callbacks.push(cb);
        },
        clear: function () {
            if (id === null) return;
            clearInterval(id);
            id = null;
        },
        pause: function(){
            paused = true;
        },
        resume: function(){
            paused = false;
        }
    };
}

你可以传递额外的 - arguments，就像使用默认的setInterval一样（即使在IE 9中）：

function callback(date) {
    console.log(date);
}

var interval = Interval(callback, 1000, new Date);

用法示例：

var interval = Interval(function () {
    console.log("init", new Date);
}, 1000);

interval.add(function () {
    console.log("a", new Date);
});

interval.add(function () {
    console.log("b", new Date);
});

document.onmousedown = interval.pause;
document.onmouseup = interval.resume;

具有多个回调的Javascript中的全局计时器

3 个答案: