如何检测一个函数何时完成另一个函数？ [英] How to detect when one function is complete from another function?

问题描述

我有一个正在构建的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; 
 
 
 
 $ b this.remove = function（listingID）{
 
 var listing = document.getElementById（listingID）; 
 var currHeight = listing.offsetHeight; 
 
 if（this.collapse（listingID，currHeight，currHeight，100））{
 
 //做一些其他东西
 
} 
 
} 
 
} 
 
 var newsFeed = new newsFeed（）; 
 newsFeed.remove（'closeMe'）; 
  

无法让this.remove函数等待this.collapse完成并返回true。这是不可能的吗？什么是最好的方式继续？

重要提示：我希望能够使用this.collapse与其他功能尚未建立与我一样的方式在这里。

解决方案

当this.collapse完成时，我无法获取this.remove函数等待

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

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

一些语言为您提供了诸如线程或协程的工具，这些工具可以允许异步例程从同步例程运行; JavaScript不。相反，remove（）必须提供collapse（）和一个回调函数，它可以在最后一帧调用自己。

I have a javascript function that is being built to animate the collapse of a div, and then proceed with other jobs. The code is as follows:

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');

I cannot get the this.remove function to wait while this.collapse finishes and returns true. Is this impossible? What is the best way to go on?

Important: I would like to be able to use this.collapse with other functions yet to be built in the same fashion as I do here.

解决方案

I cannot get the this.remove function to wait while this.collapse finishes

That is correct, it is impossible to do so. In JavaScript there is a single flow of execution. When the browser calls your code you can do some processing, but for anything further to occur (timeouts or event calls) you must return control to the browser.

‘Asynchronous’ processes like collapse() are done by setting timeouts, so control must be returned to the browser many times; when remove() calls collapse() the first time it returns immediately after the first timeout is set; that timeout cannot be fired until remove() itself returns, so your 'if' code will only ever execute if the very first call to collapse() was the last frame of animation (ie. the element was 5px or smaller already). Otherwise collapse()'s ‘return true’ will just be returning true to the browser's timeout-caller, which doesn't care at all what value you return to it.

Some languages give you tools such as threads or coroutines that can allow an asynchronous routine to be run from a synchronous routine; JavaScript does not. Instead, remove() must supply collapse() with a callback function it can call itself on the last frame.

这篇关于如何检测一个函数何时完成另一个函数？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！