Javascript setTimeout运行两次？
Javascript setTimeout运行两次？
提问于 2012-09-11 22:32:59
$(document).ready(function(){
$('#home-buzz-1').fancyTypewriter({type:true, steps:3, timeBetweenSteps:25, 'mouseOver': false, underScore:true});
setTimeout("$('#home-buzz-2').css('display','inline');$('#home-buzz-2').fancyTypewriter({type:true, steps:3, timeBetweenSteps:25, 'mouseOver': false, underScore:true});",3000);
setTimeout("$('#home-buzz-3').css('display','inline');$('#home-buzz-3').fancyTypewriter({type:true, steps:3, timeBetweenSteps:25, 'mouseOver': false, underScore:true});",4500);
});我正在尝试用Fancy Typewriter插件在这个页面上编写一个动画--它将一个元素中的文本放入其中，并用它制作一个漂亮的输入动画。但最后两个具有setTimeout函数的div运行两次。我的想法是，我想要一个div动画，然后下一个在前一个完成后动画。有什么想法吗？
回答 3
Stack Overflow用户
发布于 2012-09-11 22:37:58
您不应该将字符串传递给setTimeout函数，请尝试这样做：
$(document).ready(function(){
$('#home-buzz-1').fancyTypewriter({type:true, steps:3, timeBetweenSteps:25, 'mouseOver': false, underScore:true});
setTimeout(function(){
$('#home-buzz-2').css('display','inline');
$('#home-buzz-2').fancyTypewriter({type:true, steps:3, timeBetweenSteps:25, 'mouseOver': false, underScore:true});}
,3000);
setTimeout(function(){
$('#home-buzz-3').css('display','inline');
$('#home-buzz-3').fancyTypewriter({type:true, steps:3, timeBetweenSteps:25, 'mouseOver': false, underScore:true});}
,4500);
});Stack Overflow用户
发布于 2012-09-11 22:38:50
@zzzzBov是对的，JS是一种函数式语言：
setTimeout(function()
{
$('#home-buzz-3').css('display','inline');
$('#home-buzz-3').fancyTypewriter({type:true, steps:3, timeBetweenSteps:25, 'mouseOver': false, underScore:true});
},4500);所以setTimout期望传递一个函数，而不是一个字符串常量。它与$(document).ready(function(){});几乎相同--您总是将函数作为参数进行传递。
Stack Overflow用户
发布于 2012-09-11 22:44:03
不需要setTimeouts，插件完成时会有一个回调。
$(function(){
function addTypeWriter(elemId) { //You copy pasted the same thing over and over, make a helper function!
jQuery(elemId).show().fancyTypewriter({type:true, steps:3, timeBetweenSteps:25, 'mouseOver': false, underScore:true, callback: nextOne});
} //chaining does the body good. Notice the callback, read the docs!
var typewriters = ["#home-buzz-1","#home-buzz-2","#home-buzz-3"]; //elements you want to apply the effect to in sequential order
function nextOne() { //this is what we call
if(typewriters.length==0) { //if length is greater than zero, we have things to run!
return;
}
var elem = typewriters.shift(); //remove first item from the array
addTypeWriter(elem); //fire off the annimation
}
nextOne(); //start it off
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/12372122
复制相关文章
相似问题
腾讯云开发者
