Javascript 使用Mootools链接AddClass/RemoveClass事件

我目前正在制作一个css动画，实现这一点的一部分包括在特定的时间间隔更改主体的类名

对于mootools（以及一般的js）来说，我认为实现这一点的最佳方法是在延迟的时间间隔向主体添加/删除类，如下所示：

(function() {$(document.body).addClass('load');}).delay(20);
(function() {$(document.body).addClass('load-two');}).delay(2000);
(function() {$(document.body).addClass('load-three');}).delay(2700);
(function() {$(document.body).addClass('load-four');}).delay(4500);

然而，我对这个问题读得越多，我就越相信这是一种低效的方式来实现我想要的

上面的代码在我测试过的所有浏览器中都能运行，但是使用chain类来实现我想要的会更好吗？我已经看过了Mootools关于建立一个链的文档，但不管出于什么原因，我都在努力让演示正常工作

所以我要问的关键是，是否有更好的方法来编写上面发布的代码，以及使用不同方法的好处是什么

---

谢谢。

在mootools中设置链非常简单。但是，将Chain类用作mixin可能会涉及更多

通常，它是为了链接基于Fx的类和方法，而不是同步的类和方法。假设你有一个tween效果，它在游戏中有

link:chain

，你可以

.chain（function（）{}）

实例之后做其他事情

作为一个独立的是很好的，很容易，但它提供的时间控制方面很少

然后是线性时间线方法。在您的例子中，第一次回调在20毫秒之后运行，1980毫秒之后运行，第二次、第三次回调在第二次之后运行1680毫秒，以此类推。如果你把事情联系起来，这样每个连续的步骤都会调用下一个步骤，那么你需要考虑到这一点，并在两个动作之间真正地传递等待的时间

另一种方法是推迟他们，就像你从一开始就做的那样

我尝试过将前者简化一点：

因此，在func对象数组中，我定义了func回调、要传递的参数和延迟。请记住，func本身将

this

作用域设置为链实例，并自行调用链上的下一个实例，但您可以轻松地修改它并使用它

希望它能给你一些想法

这里是take 2，带有一个decorator函数，该函数在延迟时调用链：

// 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();

---

例如：

非常感谢您花时间演示并解释这一点。我将仔细查看您创建的示例，并进行实验，看看哪种方法的性能最好。再次感谢。：）在第二步检查这个。我认为通过函数装饰器/方法更好。我继续感谢你调查此事。这肯定是一个比我原先想的更复杂的问题，我很高兴有你的意见。干杯

// 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();