0

好的，所以我有这段代码，向 HTML 元素原型添加了一个方法（据我所知）：

HTMLElement.prototype.fadeIn = function( seconds ) {

var self = this;
var miliseconds = seconds * 1000;
var hold = this.style.transition;
this.style.transition = "opacity " + seconds + "s ease";
this.style.opacity = 1;

setTimeout(
    function () {
        self.style.transition = hold;
        return self;
    },
miliseconds);

};

我的意图是，在超时结束时，该函数将返回 HTMLElement 的实例，以便我可以将fadeIn 函数与另一个函数链接起来。

但是它没有，并且对它返回的内容做一个console.log，它说它是未定义的。谁能给我一些建议，我该怎么做？

4

2 回答 2

0

超时后你不能返回一些东西，因为赫拉克利坦流已经移动了：你也要去哪里返回？

链接具有延迟的函数的一种简单方法是将它们传入：

HTMLElement.prototype.fadeIn = function(seconds, continueWith) {
var self = this;
var miliseconds = seconds * 1000;
var hold = this.style.transition;
this.style.transition = "opacity " + seconds + "s ease";
this.style.opacity = 1;
setTimeout(
    function () {
        self.style.transition = hold;
        if(continueWith)
          continueWith();
    },
miliseconds);
};

你可以用el.fadeIn(1.5, function(){el.fadeOut(2);}); 然后fadeOut将在fadeIn完成后调用。

你也可以返回一个 promise 对象：

function createTimeoutPromise(timeOut)
{
    var promise = 
    {
        toRun: null,
        continueWith: function(func)
        {
            this.toRun = func;
        }
    }
    setTimeout(function()
    {
        if(promise.toRun)
            promise.toRun();
    }, timeOut);
    return promise;
}

HTMLElement.prototype.fadeIn = function(seconds)
{
    var self = this;
    var miliseconds = seconds * 1000;
    var hold = this.style.transition;
    this.style.transition = "opacity " + seconds + "s ease";
    this.style.opacity = 1;
    return createTimeoutPromise(miliseconds);
};

然后你可以用它来调用它 你可以用它来调用它，el.fadeIn(1.5).continueWith(function(){el.fadeOut(2);});这可能是一种更好的链接样式。

请注意，在这两种情况下，我们都会检查是否没有函数可以继续，这样链的末端就不会导致错误。

于 2015-03-22T00:53:38.687 回答
0

setTimeout()是一个异步操作。它不会“暂停”您的fadeIn()函数的执行。您的.fadeIn()方法立即返回，然后计时器操作发生。

self从setTimeout()回调返回没有任何用处。它只是返回self到计时器子系统的内部，在那里它被尽职尽责地忽略了。

您可以通过在方法末尾.fadeIn()添加 a 来支持操作中的链接：return this;

HTMLElement.prototype.fadeIn = function( seconds ) {
    var self = this;
    var miliseconds = seconds * 1000;
    var hold = this.style.transition;
    this.style.transition = "opacity " + seconds + "s ease";
    this.style.opacity = 1;

    setTimeout(
        function () {
            self.style.transition = hold;
        }, miliseconds);
    return this;
};

但是，这不会告诉您淡入淡出操作何时真正完成的任何信息。如果您想知道这一点，则必须在方法中设计其他内容（回调或承诺或队列）以支持动画链接。

如果你想像 jQuery 那样做动画链接，你可以这样做：

obj.fadeIn(5).fadeOut(5);

并且两个动画会依次发生，那么就需要一个更复杂的系统。jQuery 使用动画队列，其中动画不一定立即执行，而是添加到特定于特定 DOM 对象的队列中。每当该特定对象的动画完成时，它就会在其队列中查找是否有另一个动画等待执行该相同对象。如果是这样，它将启动该动画。

此外，如果您使用 CSS3 动画并且需要知道动画何时完成，则需要在对象上注册 transitionend 事件。

于 2015-03-22T00:36:52.340 回答