Javascript-仅在效果完成后重新加载页面

我有以下代码-单击按钮后，将运行拼写功能，该功能将播放一个简短的声音并显示/隐藏一些图像，然后在PHP中通过ajax执行一些数据库查询，然后通过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";
    }});

}

功能拼写（val，val1，val2）{
如果（val==1）{
让魔法=''；
document.getElementById（'thunder'）.play（）；
$（“#效果”）.html（magic.show（）.delay（200）.fadeOut（200）；）
如果（val==2）{…}
$.ajax
（{url:'spell.php'，
数据：{“var1”：val，“var2”：val1，“var3”：val2}，
键入：“get”，
成功：函数（json）{
如果（！json.error）window.location=“game.php”；
}});
}

如果我移除window.location，那么它工作正常，播放声音，显示图像

但是ajax的执行和窗口位置不会等到声音和jquery效果完成，它会很快刷新页面，不会播放声音，也不会显示图像

---

如何实现窗口位置等待效果完成？

如果希望ajax等待，我建议在淡出函数中添加回调函数

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";
    }
  });
}

功能拼写（val，val1，val2）{
如果（val==1）{
让魔法=''；
document.getElementById（'thunder'）.play（）；
$（“#效果”）.html（magic）.show（）.delay（200）.fadeOut（200，function（）{
//我们准备好开始比赛了
startGame（val、val1、val2）；
});
}
}
功能启动名（val、val1、val2）{
$.ajax（{url:'spell.php'，
数据：{“var1”：val，“var2”：val1，“var3”：val2}，
键入：“get”，
成功：函数（json）{
如果（！json.error）window.location=“game.php”；
}
});
}

谢谢，我正在考虑类似的解决方案，也可能使用then（），但希望避免创建两个单独的函数，但这不是问题，这样应该可以工作。