Running multiple Javascript functions in order?

Question

Ok, so I have the following HTML:

<a href="#" onclick="bump_add('.$fetch['photo_id'].')">
    <img id="bump_img" src="img/bump.png"/>
</a>

Currently my Javascript/Ajax looks like this:

function bump_add(photo_id) {
    $.post('php/bump_add.php', {photo_id:photo_id}, function(data){
        if (data='success') { //Handled by PHP
            bump_get(photo_id);
            toggle_visibility('bump_img')
        } else {
            alert(data);
        }
    });
}

function bump_get(photo_id) {
    $.post('php/bump_get.php', {photo_id:photo_id}, function(data){
        $('#photo_'+photo_id+'_bumps').text(data); //Handled by PHP
    });
}

function toggle_visibility(id) {
    var e = document.getElementById(id);
    if(e.style.display == 'block') {
        e.style.display = 'none';
    }
}

I'm not great at Javascript, so I'm not entirely sure how to achieve my objective.

What I'm trying to do is run the bump_add() function on the 'onclick' event (which works), followed by the bump_get() function (which also works). But then to finally run the toggle_visibility() function, this bit doesn't work.

Any ideas as to what I'm doing wrong? Is the Javascript function for toggle_visibility() incorrect, or am I just using it incorrectly? The aim of it is to hide the img with the 'bump_img' id.

You're already using jQuery, so why not just do `$('#bump_img').hide()` instead of abstracting that out to a function? If you want that to fire after `bump_get()` gets a response, just put it in the callback for that request. — Matthew Blancarte, Jun 21 '13 at 19:46

score 1 · Answer 1 · answered Jun 21 '13 at 19:44

Check out queue , works something like t his:

var div = $("div");

function runIt() {
  div.show("slow");
  div.animate({left:'+=200'},2000);
  div.slideToggle(1000);
  div.slideToggle("fast");
  div.animate({left:'-=200'},1500);
  div.hide("slow");
  div.show(1200);
  div.slideUp("normal", runIt);
}

function showIt() {
  var n = div.queue("fx");
  $("span").text( n.length );
  setTimeout(showIt, 100);
}

runIt();
showIt();

Here is a demo

score 0 · Accepted Answer · edited May 23 '17 at 12:29

Also, you should make use of promises, like :

function bump_add(photo_id) {
        $.post('php/bump_add.php', {photo_id:photo_id}, function(data){
            if (data='success') { //Handled by PHP
                bump_get(photo_id).done(function(){
                    toggle_visibility('bump_img');
                });
            } else {
                alert(data);
            }
        });
    }

    function bump_get(photo_id) {
        var promise = $.post('php/bump_get.php', {photo_id:photo_id}, function(data){
            $('#photo_'+photo_id+'_bumps').text(data); //Handled by PHP
        });
        return promise;
    }

    function toggle_visibility(id) {
        $('#' + id).slideToggle(); // just an example.
    }

The idea is that bump_get will return a promise and you can use it in your bump_add function.

See: jQuery deferreds and promises - .then() vs .done() and http://api.jquery.com/promise/ for more info
Also, since you use jquery, make use of it in your toggle_visibility function, see the way i updated it.

Running multiple Javascript functions in order?

2 Answers2