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.location:

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

}

If I remove the window.location, then it works fine, sound is played, image is showed.

But the ajax execution and window location doesn't wait until the sound and jquery effects are finished, and it refreshes the page so quickly, that no sound is played and no image is shown.

How can I achieve that the window location will wait to finish the effects?

Answer 1

I'd recommend adding a callback function to your fadeOut function if you want the ajax to wait for it.

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