如何從另一個功能中檢測一個功能何時完成？

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中，只有一個執行流程。 當瀏覽器調用您的代碼時，您可以進行一些處理，但是對於進一步發生的事情（超時或事件調用），您必須將控制權交還給瀏覽器。

像crash（）這樣的“異步”過程是通過設置超時來完成的，因此必須多次將控制權返回給瀏覽器。 當remove（）第一次調用crash（）時，它在設置了第一次超時后立即返回； 在remove（）本身返回之前無法觸發超時，因此，只有在對塌陷（）的第一次調用是動畫的最后一幀（即元素已經為5px或更小）的情況下，“ if”代碼才會執行​​。 否則，crash（）的'return true'將只向瀏覽器的timeout-caller返回true，這根本不關心您返回的值是多少。

有些語言為您提供了諸如線程或協程之類的工具，這些工具可以使異步例程從同步例程中運行。 JavaScript沒有。 取而代之的是，remove（）必須為collapse（）提供一個回調函數，該函數可以在最后一幀調用自身。

Answer 2

在發生其他情況之前，您無法暫停Javascript中的執行。 您所能做的就是在執行完最后一步后，附加一個回調函數以collapse以進行調用。

作為附帶說明，jQuery提供了諸如fade（），animate（）等功能並支持排隊。 如果您不想使用jQuery，仍然可以查看代碼以了解其實現方式。

請參閱此頁面中的示例。

Answer 3

setTimeout不是“睡眠”狀態。 該函數將在那里結束並返回“ undefined”。

為了解決這個問題，我認為您應該執行以下操作：

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

然后return true; ，崩潰（）將以：

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
}