javascript在html元素方法运行setTimeout后返回此值

好的，我有这段代码，在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);

};

---

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

但是它没有，并且对返回的内容执行console.log，它表示它未定义。有人能给我一些建议吗？

setTimeout（）

是一种异步操作。它不会“暂停”执行

fadeIn（）

函数。您的

.fadeIn（）

方法立即返回，然后计时器操作发生

从

setTimeout（）

回调返回

self

，没有任何用处。它只是将

self

返回到计时器子系统的内部，在那里它被尽职地忽略

您只需添加一个

返回该值，就可以从
.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事件。
超时后无法返回某些内容，因为heraclitan流已移动：您也要返回到哪里

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

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）；}）
调用它；然后在
fadeIn
完成后调用
fadeOut

您还可以返回承诺对象：

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）；}）调用它这是一种更好的链接样式

请注意，在这两种情况下，我们都会检查是否没有可继续使用的函数，以便链的末端不会导致错误。
设置超时回调的返回值不会被任何东西使用。（它是异步运行的。）您试图返回到什么？HtmleElement的实例。实际上，“这个”