Javascript pass variable through recursive function

Question

I am trying to create a recursive function in Javascript. But in order to loop my XML file properly I am trying to pass the right value taken from the XML length and pass it to the setTimeout function. The problem is that the setTimeout ( setTimeout('cvdXmlBubbleStart(nextIndex)', 3000); )function does not get the value of nextIndex and thinks it is undefined. I am sure I am doing something wrong.

jQuery(document).ready(function($) {
cvdXmlBubbleStart('0');
});

function cvdXmlBubbleStart(nextIndex) {
    $.ajax({
        url: "cross_video_day/xml/broadcasted.xml",
        dataType: "xml",
        cache: false,
        success: function(d) {
            broadcastedXML = d;
            cvdBubbleXmlProcess(nextIndex);
        }
    });
}

function cvdBubbleXmlProcess(nextIndex) {
    var d = broadcastedXML;
//console.log(nextIndex);
    var length = $(d).find('tweet').length;
    if((nextIndex + 1) < length) {


    nextIndex = length - 1;


    $(d).find('tweet').eq(nextIndex).each(function(idx) {
        var cvdIndexId = $(this).find("index");
        var cvdTweetAuthor = $(this).find("author").text();
        var cvdTweetDescription = $(this).find("description").text();
        if (cvdTweetAuthor === "Animator") {
            $('#cvd_bubble_left').html('');
            obj = $('#cvd_bubble_left').append(makeCvdBubbleAnimator(cvdIndexId, cvdTweetAuthor, cvdTweetDescription));
            obj.fitText(7.4);
            $('#cvd_bubble_right').html('');
            setTimeout('$(\'#cvd_bubble_left\').html(\'\')', 3000);
        } else {
            $('#cvd_bubble_right').html('');
            obj = $('#cvd_bubble_right').append(makeCvdBubble(cvdIndexId, cvdTweetAuthor, cvdTweetDescription));
            obj.fitText(7.4);
            $('#cvd_bubble_left').html('');
            setTimeout('$(\'#cvd_bubble_right\').html(\'\')', 3000);
        }

    });

         }else{
         $('#cvd_bubble_left').html('');
            $('#cvd_bubble_right').html('');
         }    
        //broadcastedXMLIndex++;
        setTimeout('cvdXmlBubbleStart(nextIndex)', 3000); 
}

Try to pass a function to setTimeout instead of a string: setTimeout(function(){cvdXmlBubbleStart(nextIndex);}, 3000) — basilikum
– basilikum, Commented Jun 17, 2013 at 22:31
Has string support been removed? Not saying it's a good idea, but last time I checked it still worked. — Dave Newton
– Dave Newton, Commented Jun 17, 2013 at 22:33
OP: You should use the function as shown in streetlogics' answer. As written you'd need to construct the string, e.g., "cvdXmlbubbleStart('" + nextIndex "')". Although it baffles me why you'd use a string if it's an index. — Dave Newton
– Dave Newton, Commented Jun 17, 2013 at 22:35
@DaveNewton no, string support is there but it depends on where the string is evaluated. The string doesn't remember its closure. — basilikum
– basilikum, Commented Jun 17, 2013 at 22:36
@basilikum The string doesn't need to--the string just needs to be appropriately built using the value of nextIndex. Still broken in terms of what should be done, but should work. — Dave Newton
– Dave Newton, Commented Jun 17, 2013 at 22:36

Travis J · Accepted Answer · 2013-06-17 22:43:02Z

2

Using an anonymous function will work because it shares the same scope as nextIndex.

setTimeout(function(){cvdXmlBubbleStart(nextIndex);}, 3000);

The reason that your current code does not work for you is because when you use a string inside of the setTimeout function it uses the Function constructor to create a function based on the string passed (which is similar to using eval and is not best practice). What is worse here is that the function created with Function will not share the same scope as where it was created and thus not have access to nextIndex.

edited Jun 17, 2013 at 22:43

answered Jun 17, 2013 at 22:35

Travis J

82.5k43 gold badges213 silver badges280 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 11:50:01Z

2

Checkout How can I pass a parameter to a setTimeout() callback? - basically you need to pass an anonymous function to the set timeout call

setTimeout(function(){
    cvdXmlBubbleStart(nextIndex)
}, 3000);

edited May 23, 2017 at 11:50

CommunityBot

11 silver badge

answered Jun 17, 2013 at 22:30

streetlogics

4,74037 silver badges33 bronze badges

2 Comments

Dave Newton Over a year ago

Are strings no longer supported? It's still shown as doable on MDN.

Travis J Over a year ago

@DaveNewton - strings are supported, they go into the Function constructor

Collectives™ on Stack Overflow

Javascript pass variable through recursive function

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related