更好的方法來延遲javascript中的函數？

Question

我試圖找到一個更好的方法來延遲myFunction。當你看到我動畫這個圖像淡入，當我點擊它我觸發一個新的動畫，如slideleft和在這個動畫的結尾我稱為myFunctionContinued延遲約5秒直到我的動畫完成並且鏈接打開。我不認為這是一個聰明的方法，我想你的建議！

所有代碼都在這里jsfidle

HTML只是一個帶有id和class fadein的div

<div id="object4" class="fadeIn">
 <a id="myLink" href="#" onclick="myFunction();return false;"><img class="img4" src="http://imageshack.com/a/img89/1871/deqz.png"></a></div>

CSS和關鍵幀fadein和slideleft

<style> 

body{

background-color:black;

width:800px;
}

img.img4{
width: 300px; height: 200px;
transform:translate(550px,150px);

}

/*
==============================================
fadeIn
==============================================
*/

.fadeIn{
    animation-name: fadeIn;
    -webkit-animation-name: fadeIn; 

    animation-duration: 1.5s;   
    -webkit-animation-duration: 1.5s;

    animation-timing-function: ease-in-out; 
    -webkit-animation-timing-function: ease-in-out;     

    visibility: visible !important; 
}

@keyframes fadeIn {
    0% {
        transform: scale(0);
        opacity: 0.0;       
    }
    60% {
        transform: scale(1.1);  
    }
    80% {
        transform: scale(0.9);
        opacity: 1; 
    }   
    100% {
        transform: scale(1);
        opacity: 1; 
    }       
}



/*
==============================================
slideLeft
==============================================
*/


.slideLeft{
    animation-name: slideLeft;
    -webkit-animation-name: slideLeft;  

    animation-fill-mode: forwards;
    animation-duration: 4s; 
    -webkit-animation-duration: 4s;

    animation-timing-function: ease-in-out; 
    -webkit-animation-timing-function: ease-in-out;     

    visibility: visible !important; 
}

@keyframes slideLeft {
    0% {
        transform: translateX(40%);
    }
    90% {
        transform: translateX(-3%);
    }

    100% {
        transform: rotate(-130deg) translate(-430px,60px);
    }
    /*from {transform: translateX(40%);}
    to {transform: translateX(-3%);}*/
}

</style>

功能點擊object4觸發動畫slideleft等待5秒，調用continuefunction並在同一窗口中打開鏈接

<script>

function myFunction()
{
$('#object4').click(function() {
        $(this).addClass("slideLeft");


    });

setTimeout(myFunctionContinued, 5000);

}

function myFunctionContinued(){

window.open("http://www.w3schools.com",'_self',false);}

</script>

關鍵幀樣式照片不是我想要關注的動畫的最終結果是我說延遲的方式。

謝謝你的時間！

Answer 1

當CSS3動畫完成時會觸發一個事件（來自： http ： //blog.teamtreehouse.com/using-jquery-to-detect-when-css3-animations-and-transitions-end

object4.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',   
function(e) {

// code to execute after transition ends

}）;