Make jQuery/Javascript wait until another function is done

Question

I'm working on a like-system, and I managed to get it to work, but in order for me to get it to work properly, I need it to check if the status is liked, and if it is, then unlike it, if not, then like it.

Now, here's my Javascript:

$('span#like-button<? echo $status_id; ?>').on('click', function(){
    var isLiked<?echo $status_id; ?> = '';
    var postid<? echo $status_id; ?> = $('input#postid<? echo $status_id; ?>').val();
    var userid<? echo $status_id; ?> = $('input#userid<? echo $status_id; ?>').val();
    var toid<? echo $status_id; ?> = $('input#toid<? echo $status_id; ?>').val();
    $.get('https://mysite/stuff/ajax/isliked.php', {postid: postid<?echo $status_id; ?>, userid: userid<?echo $status_id; ?>}, function(data){
        isLiked<?echo $status_id; ?> = data;
        console.log(data);
    });
    if(isLiked<?echo $status_id; ?> == "Yes"){
        console.log('Unliking Status');
    $.get('https://mysite/dash', {unlike: postid<? echo $status_id; ?>, userid: userid<? echo $status_id; ?>}, function(data){
        document.getElementById('like-button<? echo $status_id; ?>').innerHTML = 'Like';
    });
    } else if(isLiked<?echo $status_id; ?> == ""){
        console.log('Liking Status');
    $.get('https://mysite/dash', {like: postid<? echo $status_id; ?>, userid: userid<? echo $status_id; ?>, toid: toid<? echo $status_id; ?>},function(data){
        document.getElementById('like-button<? echo $status_id; ?>').innerHTML = 'Unlike';
    });
    } else {
        console.log("Error.");
    }
});

My issue is that it runs the if statement before it runs the $.get to check if the status is liked. So, to the if statement, isLiked == '', thus trying to like the status when it's already liked, instead of being able to click the unlike button to unlike the status.

So, what I need to do, is every time, on click, run the $.get() part where it checks my isliked.php script, THEN run the if() statement to check the isLiked variable.

Thanks.

Answer 1

JavaScript runs on a single thread, so it'll always wait for a function to return before the next is called. However, $.get performs an AJAX call, and so there's an event that triggers a callback function.

The most "JS" -style way of achieving your goal (postponing calls until after an AJAX call is completed) would be to move said code to the success callback:

$.get(url, data, function()
{
    //will only get called after first $.get is done
    $.get(url2, data2, function()
    {
    });
});

PS: <? echo <? echo , please don't use short opening tags. They can be turned off. Either use <?php echo or the less dangerous short echo tag: <?= $variable ?>
The latter cannot be disabled anymore ( since PHP 5.4 )