javascript - 为某部分重新定义函数中的变量

Question

我有以下代码:

var $name=prompt("In order for this page to work, we just need a piece of information. Please enter your first name.");
var $age=prompt("Please enter your new age.")

function startSong() {
    var a = 'Happy birthday to you';
    $("#btext").html(a).fadeIn(2000);
    window.scrollBy(0, 200);
    $("#btext").fadeOut(2000);
    $("#btext").html(a).fadeIn(2000);
    a = 'Happy birthday to you, ' + $name;
    $("#btext").fadeOut(2000);
    $("#btext").html(a).fadeIn(2000)

}

我希望它先打印两次“祝你生日快乐”，然后再打印“祝(姓名)生日快乐”。但是，它似乎直接跳到了变量的重新定义。

这是相关的 HTML:

<button onclick="startSong()">Now, we all want to sing you Happy Birthday! Go on and click this button!</button>
<h5 id=btext> </h5>

谢谢!

Answer 1

$("#btext").html(a) 调用和对 a 的赋值不会等待前面的淡入淡出效果完成。因此，即使先前设置的效果尚未完成，所有这些陈述都会发生。它们是异步操作

淡入淡出*调用可以传递一个回调，让代码在效果完成时运行。将您的代码放入正确的 fade* 回调中以获得预期的操作:

$("#btext").html(a).fadeIn(2000,function(){
  window.scrollBy(0, 200);
  $("#btext").fadeOut(2000,function(){
    $("#btext").html(a).fadeIn(2000,function(){
      //and so on
    });
  });
});

显然这会导致 callback hell

所以你可以选择queue your actions在淡入淡出*效果之间:

function startSong() {
  let btext = $("#btext");
  let a = "Happy birthday to you"; 
  let $name = "Stackoverflow";
  btext.html(a)
       //internally adds the effect to the fx queue
       .fadeIn(2000)
       //internally adds the effect to the fx queue
       .fadeOut(2000)
       //adds the code to change the html to fx queue
       //executes when the previous queue item is done
       .queue(function(next) {
         btext.html(a);
         //call next to let the queue advance to the next item
         next();
       })
       .fadeIn(2000)
       .fadeOut(2000)
       .queue(function(next) {
         a = 'Happy birthday to you, ' + $name;
         btext.html(a);
         next();
        })
        .fadeIn(2000);
}

#btext {
  display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="startSong()">Now, we all want to sing you Happy Birthday! Go on and click this button!</button>
<h5 id=btext> </h5>