在 mootools 中设置链非常简单。然而,使用 Chain 类作为 mixin 可能会涉及更多。
通常,它倾向于链接基于 Fx 的类和方法,而不是同步的。假设你有一个补间效果link: chain
,你可以.chain(function() {})
在实例之后做其他事情。
独立的 callChain 示例很好也很简单,但它在时间控制方面提供的很少。
然后是线性时间线方法。在您的情况下,您的第一个回调在 20 毫秒后运行,第二个在 1980 毫秒后运行,第三个在第二个后运行 1680 毫秒,依此类推。如果您将事物链接起来,以便每个连续步骤都调用下一个步骤,则您需要考虑到这一点,并实际上将时间传递给两个操作之间的等待时间。
另一种方法是像你从一开始所做的那样推迟它们。
我在这里简化了前者:http: //jsfiddle.net/dimitar/mpzzq/
(function(){
Chain.implement({
slowChain: function(duration){
// console.log(duration);
this.callChain.delay(duration === null ? 500 : duration, this);
}
});
var db = $(document.body);
var fixBody = function(cn, delay) {
console.log(arguments);
db.addClass(cn);
console.log(cn, delay);
if (this.$chain.length) {
this.slowChain(delay || 0);
}
};
var myChain = new Chain(),
funcs = [{
fn: fixBody,
args: ["load"],
delay: 1980
}, {
fn: fixBody,
args: ["load-two"],
delay: 700
}, {
fn: fixBody,
args: ["load-three"],
delay: 2000
}, {
fn: fixBody,
args: ["load-four"],
delay: 0
}];
myChain.chain(
funcs.map(function(el) {
el.args.push(el.delay);
return el.fn.bind.apply(el.fn, [myChain].concat(el.args));
})
);
document.getElement("button").addEvents({
click: function() {
myChain.slowChain(20);
}
});
})();
所以在我的 funcs 对象数组中,我定义了 func 回调、要传递的参数和延迟。请记住,func 本身将this
范围设置为链实例,并自行调用链上的下一个实例,但您可以轻松地对其进行修改并使用它。
希望它能给你一些想法。
这里需要 2 个装饰器函数,它会延迟调用链:
// function decorator.
Function.implement({
chainDelay: function(delay, bind) {
// allows you to set a delay for chained funcs and auto call stack (if bind is a chain instance)
var self = this,
args = (arguments.length > 2) ? Array.slice(arguments, 2) : null;
return function() {
setTimeout(function() {
self.apply(bind, args.concat(Array.from(arguments)));
if (bind && bind.$chain && bind.$chain.length)
bind.callChain.call(bind);
}, delay);
}
},
justChain: function(bind) {
// runs a chained func when due and auto calls stack for next (if bind is a chain instance and avail)
var self = this, args = (arguments.length > 1) ? Array.slice(arguments, 1) : null;
return function() {
self.call(bind, args);
if (bind && bind.$chain && bind.$chain.length)
bind.callChain.call(bind);
}
}
});
var moo = new Chain();
moo.chain(
// some delayed ones.
(function(what) {
console.log(what);
}).chainDelay(3000, moo, "hi"),
(function(what, ever) {
console.log(what, ever);
}).chainDelay(3000, moo, "there", "coda"),
(function(what) {
new Element("div[id=foo][html=" + what +"]").inject(document.body);
}).chainDelay(1000, moo, "mootools FTW!"),
// regular ones here for good measure!
(function() {
document.id("foo").setStyle("color", "red")
}).justChain(moo),
(function() {
document.id("foo").setStyle("background-color", "blue")
})
);
moo.callChain();
例如:http: //jsfiddle.net/dimitar/Y4KCB/4/