Javascript setTimeout 运行两次？

Question

$(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 进行动画处理，然后在前一个 div 完成后让下一个 div 进行动画处理。有什么想法吗？

Answer 1

您不应该将字符串传递给 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);
});