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

score 10 · Accepted Answer · answered Sep 02 '09 at 16:40

10

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

arguments.callee( .... );

See here for more info.

answered Sep 02 '09 at 16:40

jimr

11,080
1
33
32

Would it be possible to get a complete sample? I haven't been able to make this work, yet... – krdluzni Sep 02 '09 at 17:06
The linked site has an example of creating an anonymous recursive factorial function. – jimr Sep 02 '09 at 17:39
1

agruments.callee was deprecated. see http://stackoverflow.com/questions/103598/why-was-the-arguments-callee-caller-property-deprecated-in-javascript – Adriano Aug 16 '13 at 11:43
You should name the function instead – Trevor Sep 01 '14 at 11:12

score 6 · Answer 2 · edited May 23 '17 at 10:29

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:

the function handler will only be passed the event object.
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 );
});

krdluzni · Answer 3 · 2009-09-02T16:57:34.363

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

score 1 · Answer 4 · answered Sep 02 '09 at 16:42

1

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();

answered Sep 02 '09 at 16:42

Paul Dixon

295,876
54
310
348

score 1 · Answer 5 · edited Jul 18 '14 at 21:42

1

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.

edited Jul 18 '14 at 21:42

Andrew Barber

39,603
20
94
123

answered Sep 20 '10 at 23:50

Matt

11
1

JQuery recursive function?

5 Answers5

There are two problems you are running into:

Solution for 2:

Solution for 1: