Javascript - 僅在效果完成后重新加載頁面

Question

I have this code - after I click a button, the spell function will run, which should play a short sound and show/hide some image, after that it executes some database queries via ajax in PHP and then refreshes the current page via window.地點：

function spell(val,val1,val2) {

if (val === 1) {
    let magic ='<img src="effects/thunder.png" alt="thunder"/>';
    document.getElementById('thunder').play();
    $("#effect").html(magic).show().delay( 200 ).fadeOut(200);}

if (val === 2) {...}

    $.ajax
    ({url: 'spell.php',
        data: {"var1": val,"var2": val1,"var3": val2},
        type: 'get',
        success: function(json) {
             if(!json.error) window.location="game.php";
    }});

}

如果我刪除 window.location，那么它工作正常，播放聲音，顯示圖像。

但是 ajax 執行和 window 位置沒有等到聲音和 jquery 效果完成，它刷新頁面這么快，沒有播放和顯示圖像聲音。

如何實現 window 位置將等待完成效果？

Answer 1

如果您希望 ajax 等待它，我建議您將回調 function 添加到您的淡出 function 中。

function spell(val,val1,val2) {
  if (val === 1) {
    let magic ='<img src="effects/thunder.png" alt="thunder"/>';
    document.getElementById('thunder').play();
    $("#effect").html(magic).show().delay( 200 ).fadeOut(200, function() {
      //we're ready to start the game
      startGame(val, val1, val2);
    });
  }
}

function startGame(val, val1, val2) {
  $.ajax({url: 'spell.php',
    data: {"var1": val,"var2": val1,"var3": val2},
    type: 'get',
    success: function(json) {
      if(!json.error) window.location="game.php";
    }
  });
}