JQuery recursive function?

Question

How can I call a function from inside the function, so it becomes recursive? Here is my code, I have added a comment where I would like to start the recursion:

$('a.previous-photos, a.next-photos').click(function() {
    var id = $('#media-photo img').attr('id');
    var href = $(this).attr('href');
    href = href.split('/');
    var p = href[href.length - 1];
    var url = '/view/album-photos/id/' + id + '/p/' + p;

    $.get(url, function(data) {
        $('.box-content2').replaceWith('<div class="box-content2"' + data + '</div>');
    });

    // here I want to call the function again

    return false;
});

Answer 1

You can make a recursive call to an anonymous function by doing

arguments.callee( .... );

See here for more info.

Answer 2

The top answer is out of date. Currently (Aug 2012) callee is deprecated at least in Firefox.Using callee is out of date. Currently (Aug 2012) callee is "... deprecated by ECMA-262."(see discussion)

There are two problems you are running into:

1. the function handler will only be passed the event object.
2. the function is not named, so you can't refer to it for recursion

Solution for 2:

This is the easier of the two. Typically the reason for using anonymous functions is to keep a namespace clean. Parentheses define a local namespace, so after giving the function a name it will not be accessible outside the parentheses. The following will work for you:

$('.someclass').onClick( function dosomething(){
    ... your code ...
    dosomething() //again
});
dosomething() // will cause scope error, function not defined

Solution for 1:

This is a little more difficult. Since the only thing passed to the function is the event object you will need to extend that to pass in values. Fortunately, it turns out that jQuery has a system just for this!

$('.someclass').on( 'click', {myvar: 0}, function dosomething(event){
    ... your code ...
    event.data.myvar = event.data.myvar + 1;
    dosomething(event) //again
});

Note: this is especially useful for when you must attach and detach a handler to prevent inifinite loops like with DOMSubtreeModified.

$('.someclass').on( 'DOMSubtreeModified.mynamespace', {myvar: 0}, function myfunc( event ){
    $(this).off( 'DOMSubtreeModified.mynamespace' );
    ... Some Code that changes .someclass subtree ...
    event.data.myvar = event.data.myvar + 1;
    $(this).on( 'DOMSubtreeModified.mynamespace', {myvar: event.data.myvar}, myfunc );
});

Answer 3

Something of this sort should do the trick, but there ought to be a nicer way to set it up:

function myfunc() {
    var id = $('#media-photo img').attr('id');
    var href = $(this).attr('href');
    href = href.split('/');
    var p = href[href.length - 1];
    var url = '/view/album-photos/id/' + id + '/p/' + p;

    $.get(url, function(data) {
        $('.box-content2').replaceWith('<div class="box-content2"' + data + '</div>');
    });

    if(!cond){//you need a condition, or it'll recurse indefinitely.
       myfunc();
    }

    return false;
}

$('a.previous-photos, a.next-photos').click(function(){myfunc();});

Answer 4

From Javascript 1.2 onwards you can use arguments.callee(...) to effect a recursive call to an anonymous function

// here I want to call the function again
arguments.callee();

Answer 5

Put your code in a jQuery plugin format and call itself for example...

(function($) {
$.fn.togglethis = function () {
    $(this).animate({opacity:"1.0"}, 1000, function() {
        /* Code Here */
        return $(this);
    });

}
})(jQuery);
$(document).ready(function() {
    $("#togglethis").togglethis();
});

Insert your desired code where the comment is.