[英]How do I get data from the async/await function before rendering out the UI?
[英]How do I prevent a javascript function from rendering before another function rendering?
從理論上講,假設我有3個可創建視覺效果的javascript(jquery)函數。 如果要在前兩個渲染之后渲染其中一個,我該如何做?
Javascript:
<script type="text/javascript">
$(function() {
var transition = 'slow';
var target1 = $('#somediv');
var target2 = $('#second_div');
var target3 = $('#third_div');
target1.delay(5000).fadeIn();
target2.delay(target2Time).fadeIn();
target3.delay(target3Time).fadeIn();
});
</script>
<script type="text/javascript">
$.fn.teletype = function(opts){
var $this = this,
defaults = {
animDelay: 50
},
settings = $.extend(defaults, opts);
$.each(settings.text, function(i, letter){
setTimeout(function(){
$this.html($this.html() + letter);
}, settings.animDelay * i);
});
};
$(function(){
$('#second_div').teletype({
animDelay: 200,
text: 'Hello, this is your classmate!'
});
});
</script>
HTML:
<div id="somediv">Some Content</div>
<div id="second_div"></div>
<div id="third_div">Some third content</div>
我做了這個演示。 它演示了如何使一個動畫等待另外兩個動畫完成:
var anim1 = $( '#elem1' ).animate({ width: 200 }, 3000 );
var anim2 = $( '#elem2' ).animate({ width: 200 }, 2000 );
$.when( anim1, anim2 ).done(function () {
$( '#elem3' ).animate({ width: 200 }, 1000 );
});
現場演示: http : //jsfiddle.net/m67Ua/
您可以對衰落要求應用相同的技術:
var fade1 = $( '#img1' ).fadeIn( 3000 );
var fade2 = $( '#img2' ).fadeIn( 2000 );
$.when( fade1, fade2 ).done(function () {
$( '#img3' ).fadeIn( 1000 );
});
現場演示: http : //jsfiddle.net/m67Ua/1/
與改進一樣,您可以傳遞一系列動畫
var array = new Array();
array.push( $( '#img1' ).fadeIn( 3000 ));
array.push( $( '#img2' ).fadeIn( 2000 ));
然后訣竅是使用apply方法,按照jquery的預期將數組參數更改為列表參數
$.when.apply(this, array ).done(function () {
$( '#img3' ).fadeIn( 1000 );
});
現場演示:
我需要回調和完成,所以檢查一下:
$.when(
$('#container .item')
.animate({"opacity": "0"}, 1000,
function onCallbackForEach () {
console.log('callback on element called');
})
).done( function onFinally () {
console.log('done called');
});
這使我可以在動畫結束后處理每個元素(例如,用它們替換舊的元素),並在所有動畫完成后附加地有一個回調函數來工作...
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.