推遲一個函數，直到完成幾個動畫

我發現了很多關於延遲，承諾，同步運行javascript等問題，我已經嘗試了很多東西，但仍然無法使其工作。推遲一個函數，直到完成幾個動畫

編輯下面是關於這個問題的更多解釋。 fetchData有一個例程，它依賴於showStuff中的所有代碼完成。特別是，使用屏幕大小的百分比創建了div，我們需要獲得這些div的高度，以便我們可以在它們內部繪製標尺。在slideDown（）完成之前，fetchData正在運行。請參閱下面直接添加的其他console.log代碼。

我的按鈕onClick（）調用showOverlay（）。

function showOverlay() { 
    showStuff().promise().done(function() { 
     console.log($("#gauge1").height()); //returns -0.5625 or something close 
     fetchData(); //ajax call 
    }); 
} 

function showStuff() { 
    $("#overlay").fadeIn(200); 
    $("#gauges").slideDown(800); 
    $(".gauge").each(function() { 
     $(this).show(); //unhides #gauge1 div 
    });   
}

我得到的錯誤說：不能調用未定義的方法'承諾'。

我沒有顯示我的fetchData()函數，但它基本上使用ajax調用Web服務，然後使用Raphael在屏幕上創建計量器。如果fetchData在動畫完成之前運行，則量表不能正確顯示，因爲它們的大小與.gauge div相關。

EDIT1

既不的下面工作的例子。他們都運行沒有錯誤，但返回速度太快。

function showOverlay() { 
    showStuff().promise().done(function() { 
     fetchData(); 
    }); 
} 

function showStuff() { 
    var def = $.Deferred(); 
    $("#overlay").fadeIn(200); 
    $("#gauges").slideDown(800); 
    $(".gauge").each(function() { 
     $(this).show(); 
    }); 
    def.resolve(); 
    return def; 
}

無法正常工作或：

function showOverlay() { 
    $.when(showStuff()).done(function() { 
      fetchData(); 
     }); 
} 

function showStuff() { 
    $("#overlay").fadeIn(200); 
    $("#gauges").slideDown(800); 
    $(".gauge").each(function() { 
     $(this).show(); 
    });   
}

來源

2014-02-25 HK1

您已經2個問題，遞延並且那不是你以後怎麼運行一個動畫另一個。

這將讓你的方式部分：

function showStuff() { 
    var deferred = $.Deferred(); 
    $("#overlay").fadeIn(300,function(){ 
    $("#gauges").slideDown(800,function(){ 
     $(".gauge").show(); //doing this one after another takes more code. 
     deferred.resolve(); 
    }); 
    }); 

    return deferred; 
}

繼承人的codepen：http://codepen.io/krismeister/pen/pvgKj

如果您需要做複雜的動畫這樣的。 GSAP可能會找到更好的結果。繼承人如何錯開： http://www.greensock.com/jump-start-js/#stagger

來源

2014-02-25 02:45:32 LessQuesar

那麼，爲每個循環做一個操作並仍然使用延遲對象需要做些什麼？ – HK1

做到這一點http://stackoverflow.com/questions/4143308/jquery-each-including-a-delay-looking-for-clean-code然後確保延遲只在上一次動畫完成時調用，請執行以下操作： HTTP：//計算器。com/questions/4006822/last-element-in-each-set – LessQuesar

heres the（TimelineLite）GSAP方式待辦事項鍊接。 http://www.greensock.com/jump-start-js/#timelinelite-syntax它的一個恥辱gsap尚未成爲主流。回到閃存日，每個人都使用閃存版tweenmax。 – LessQuesar

嘗試使用$.when()代替：

$.when(showStuff()).done(function() { 
    fetchData(); 
});

來源

2014-02-25 02:15:56 Felix

但是'showStuff（）'沒有按沒有任何回報。這怎麼可能工作？ – jfriend00

已經嘗試過多次，然後再試一次。它不起作用。 – HK1

@ HK1你在'showStuff（）'函數中的ajax調用在哪裏？ – Felix

你一）需要返回從showStuff b的東西）應直接返回一個承諾，讓.promise()方法是不必要的：

function showOverlay() { 
    showStuff().done(function() { 
     fetchData(); 
    }); 
} 

function showStuff() { 
    return $("#overlay").fadeIn(200).promise().then(function() { 
     return $("#gauges").slideDown(800).promise(); 
    }).then(function() { 
     return $(".gauge").show().promise(); 
    }); 
}

來源

2014-02-25 07:53:16 Bergi

推遲一個函數，直到完成幾個動畫

回答

相關問題