Question

我有一个javascript函数，用于动画div的崩溃，然后继续其他工作。代码如下：

function newsFeed() {

    var self = this;

    this.collapse = function(listingID,orig_height,curr_height,opacity) {

        var listing = document.getElementById(listingID);
        var reduceBy = 5;
        if(curr_height > reduceBy) {
            curr_height = curr_height-reduceBy;
            listing.style.overflow = "hidden";
            listing.style.height = (curr_height-40) + "px";

            if(opacity > 0) {
                opacity = opacity - 10;
                var opaque = (opacity / 100);

                listing.style.opacity=opaque;                      
                listing.style.MozOpacity=opaque;                   
                listing.style.filter='alpha(opacity='+opacity+')';
            }

            setTimeout(function() { self.collapse(listingID,orig_height,curr_height,opacity); },1);

        }else{

            return true;

        }
    }

    this.remove = function(listingID) {

        var listing = document.getElementById(listingID);
        var currHeight = listing.offsetHeight;

        if (this.collapse(listingID,currHeight,currHeight,100)) {

                // DO SOME OTHER STUFF

        }

    }

}

var newsFeed = new newsFeed();
newsFeed.remove('closeMe');

我无法得到this.remove函数来等待this.collapse结束并返回true。这不可能吗？最好的方法是什么？

重要提示：我希望能够将this.collapse与其他功能一起使用，而不是像我在这里一样构建。

Answer 1

我无法让this.remove函数在this.collapse结束时等待

这是正确的，不可能这样做。在JavaScript中，只有一个执行流程。当浏览器调用您的代码时，您可以进行一些处理，但是对于任何进一步发生的事件（超时或事件调用），您必须将控制权返回给浏览器。

像collapse（）这样的'异步'进程是通过设置超时来完成的，因此必须多次将控件返回给浏览器;当remove（）调用collapse（）时，第一次在设置第一个超时后立即返回 ;在remove（）本身返回之前不能触发超时，所以如果第一次调用collapse（）是动画的最后一帧（即元素已经是5px或更小），那么你的'if'代码将只会执行。否则，collapse（）的'return true'将返回true给浏览器的超时调用者，它不关心你返回它的值。

某些语言为您提供了线程或协同程序等工具，可以允许从同步例程运行异步例程; JavaScript没有。相反，remove（）必须为collapse（）提供一个可以在最后一帧调用自身的回调函数。

Answer 2

除非发生其他事情，否则无法在Javascript中暂停执行。您所能做的就是将一个回调函数附加到collapse，以便在执行完最后一步后调用。

作为旁注，jQuery提供了fade（），animate（）等函数，并支持排队。如果您不想使用jQuery，您仍然可以查看代码以了解它是如何实现的。

请参阅this page中的示例。

Answer 3

setTimeout不是“睡眠”。该函数将在那里结束并返回“undefined”。

为了解决这个问题，我认为你应该这样做：


var newsFeed = new newsFeed();
newsFeed.onaftercollapse = function () {
    newsFeed.remove('closeMe'); // "newsFeed" or "self"? must test
};

然后，代替return true;，collapse（）将以：

结束


if (self.onaftercollapse) self.onaftercollapse();

Answer 4

此示例演示如何检查函数是否完整。

function foo() {
  foo.complete = false;
  // your code here
  foo.complete = true;
}
foo.complete = false;

if (foo.complete) { // foo execution complete
  // your code here
}

此代码演示了如何检查函数是否已运行一次。

function foo() {
  // your code here
  foo.ranOnce || (foo.ranOnce = true);
}
foo.ranOnce = false;

if (foo.ranOnce) { // foo execution complete at least once
  // your code here
}

如何从另一个函数检测一个函数何时完成？

4 个答案: