javascript return 在 html 元素方法运行 setTimeout 之后

Question

好的，所以我有了这段代码，向 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);

};

我的意图是，在超时结束时，函数将 return HTMLElement 的实例，这样我就可以将 fadeIn 函数与另一个函数链接起来。

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

Answer 1

setTimeout() 是一个异步操作。它不会 "pause" 执行您的 fadeIn() 函数。您的 .fadeIn() 方法 returns 立即发生，然后计时器操作发生。

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

您只需在方法末尾添加 return this; 即可支持从 .fadeIn() 操作链接：

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 事件。

Answer 2

您不能在超时后 return 进行某些操作，因为 heraclitan 流已经继续：您也要去哪里 return？

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

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 完成后被调用。

您还可以 return 承诺对象：

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);}); 调用它，这可能是一种更好的链接方式。

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

javascript return 在 html 元素方法运行 setTimeout 之后

javascript return this after html element method runs setTimeout

javascript

prototype

method-chaining

htmlelements