jQuery each callback

Question

How to use callbacks on jQuery each function?

I am trying something like:

$.each(images, function(key, value) { 
    new_images+= '<li><a href="'+value+'"><img src="'+value+'" alt="'+[key]+'" /></a></li>';
}, function (){
    $('#Gallery').remove();
    $('body').append('<ul class="gallery">'+new_images+'</ul>');
});

Solution 1

What's wrong with this code? You don't need a callback for $.each.

$.each(images, function(key, value) { 
    new_images+= '<li><a href="'+value+'"><img src="'+value+'" alt="'+[key]+'" /></a></li>';
});

$('#Gallery').remove();
$('body').append('<ul class="gallery">'+new_images+'</ul>');

Solution 2

$.each(); is a synchronous function. That means you don't need a callback function inside because any code you write after $.each(); will run affter $.each(); ends.

Solution 3

Do you mean this?

$.each(images, function(key, value) { 
    new_images+= '<li><a href="'+value+'"><img src="'+value+'" alt="'+[key]+'" /></a></li>';
});
function myMethod(){
    $('#Gallery').remove();
    $('body').append('<ul class="gallery">'+new_images+'</ul>');
};
myMethod();

Solution 4

I have now a solution for an .each-callback!

I had to do an ajax-request for each element in an array. So I made a div-container with all the div-elements for each element. Each time a load was made, the div-element changed to green and .slideUp, after .remove. And each time i asked if the div-container is empty. If yes, I know, all elements are fully loades (because removed).

Here a part of my code:

<script>
$(document).ready( function() {
    $.each(myChannels, function(index, value) {
        $("#tag_"+value).load('getxmls/ajaxrenewchannel/channel:'+value, function() {
            $("#tag_"+value).removeClass('alert-info').addClass('alert-success');
            $("#tag_"+value).slideUp('600', function () {
                $("#tag_"+value).remove();
                if( $('#loadcontainer').is(':empty') ) {
                    window.location = 'feeds/';
                }

                });

        });
    });
});
</script>

Hope this helps somebody out there...

View more solutions

Comments

[Alnitak]

the confusion arises because people (mis)use the term "callback" to refer to any time a function reference is passed, whether that function is subsequently called asynchronously, or not.

[Fernando Silva]

@Alnitak I intuitively see a callback as some kind of trigger to execute code after a certain block/function/process/animation is finished. If this isn't correct or even just incomplete interpretation, could you refer me to some documentation that might help me grasp the concept better? The comment you made completely through me off, mainly because I'm still trying to learn all this "lingo"

[Alnitak]

@FernandoSilva well, see for example the MDN documentation for Array.prototype.map - developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… - They call the supplied function callback even though it isn't "something called after".

[Fernando Silva]

@Alnitak so basically what you're saying is a callback is simply a reference to a function that will be executed within the function that passes that reference? Array.prototype.map cycles through an array and given certain conditions executes the passed callback function. So what we usually see in jQuery as a callback is simply a way to reference a function, that usually gets triggered after the success or complete is achieved, like with an animation and that's how people usually associate the callback term to an event type of thing? Is this correct?

[Fernando Silva]

@Alnitak now you got me thinking. If I wanted to implement the callback behaviour, in php I would do something like function foo($callback){//do something; $callback();}, how could I achieve the same in javascript, would it be the same? function jsFoo(callback){//do something; callback();} ?

[Saiful Islam]

Are you sure? Actually I am still in confusion.