在javascript中延迟函数的更好方法？

我正在尝试找到一种更好的方法来延迟我的功能。正如你所看到的，我将这幅图像设置为淡入状态，当我点击它时，我会触发一个新的动画，比如slideleft，在这幅动画结束时，我调用我的功能继续延迟大约5秒，直到我的动画完成并打开链接。我认为这不是一种聪明的方法，我希望得到您的建议

所有代码都在这里

HTML只是一个带有id和类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>

身体{
背景色：黑色；
宽度：800px；
}
img.img4{
宽度：300px；高度：200px；
转换：转换（550px，150px）；
}
/*
==============================================
法丹
==============================================
*/
法丹先生{
动画名称：fadeIn；
-webkit动画名称：fadeIn；
动画持续时间：1.5s；
-webkit动画持续时间：1.5s；
动画计时功能：轻松进出；
-webkit动画计时功能：轻松输入输出；
可见性：可见！重要；
}
@关键帧淡入淡出{
0% {
变换：比例（0）；
不透明度：0.0；
}
60% {
转换：比例（1.1）；
}
80% {
变换：比例（0.9）；
不透明度：1；
}   
100% {
变换：比例（1）；
不透明度：1；
}       
}
/*
==============================================
斯莱德莱夫特
==============================================
*/
斯莱德莱夫特先生{
动画名称：slideLeft；
-webkit动画名称：slideLeft；
动画填充模式：正向；
动画持续时间：4s；
-webkit动画持续时间：4s；
动画计时功能：轻松进出；
-webkit动画计时功能：轻松输入输出；
可见性：可见！重要；
}
@关键帧滑动{
0% {
转化：translateX（40%）；
}
90% {
转化：translateX（-3%）；
}
100% {
变换：旋转（-130度）平移（-430px，60px）；
}
/*来自{transform:translateX（40%）；}
到{transform:translateX（-3%）；}*/
}

函数单击object4触发动画slideleft 等待5秒调用continuedfunction并在同一窗口中打开链接

<script>

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


    });

setTimeout(myFunctionContinued, 5000);

}

function myFunctionContinued(){

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

</script>

函数myFunction（）
{
$（'#object4'）。单击（函数（）{
$（this.addClass（“slideLeft”）；
});
设置超时（myFunctionContinued，5000）；
}
函数myFunctionContinued（）{
窗口打开（“http://www.w3schools.com“，”自我“，假）；}

关键帧样式的照片不是我动画的最终结果，我想聚焦的是我说过的延迟方式

---

谢谢你的时间

CSS3动画完成时会触发一个事件 （来自：

}))

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

// code to execute after transition ends