Question

I have a JavaScript function that goes through a list of checked checkboxes and uploads a video file for each checked box. I’m trying to make sure that the videos have been transcoded into a smaller format before I begin the upload process. I use to track the index in the array videos, that have completed the transcode process. I check to be sure that counter is >= id before starting the upload process for a given video. If counter is too low (the file is not yet transcoded) I use setTimout() to call the uploadVideos function again. It never seems to call the uploadVideos function again, because I never see the alert popup a second time.

How can I get this to work?

function uploadVideos(id, videos, selected, boxes) {

        var status = document.getElementById('currentUploadStatus');
        // need to deal with element an array
        var fields = videos[id].split(":", 2);
        var playlist = document.getElementById('playlist');
        var dataString = 'videoId='+ fields[0] + '&playlist=' + escape(playlist.value); 

// need to determine the maxTranscodedId
        var counter = document.getElementById('counter');
        alert('counter: ' + counter.innerHTML + " id: " + id);
        if (counter.innerHTML >= id) {

            id++;
            status.innerHTML = "<b class='status'>Uploading Bout #" + fields[1] + " (" + id + " of " + videos.length + ")</b>";

            $.ajax({  
                type: "GET",  
                url: "floUpload.php",  
                data: dataString,  
                success: function(txt) {
                    if (txt != 'Success') {
                        alert(':' + txt + ':');
                    }

                    if (id < videos.length) {
                        uploadVideos(id, videos, selected, boxes);

                    } else {
                        //re-enable the start button
                        var startButton = document.getElementById('start');
                        startButton.disabled = false;

                        status.innerHTML = "<b class='status'>Upload Complete</b>";
                        alert('Upload Completed');

                    }

                    //deselect the checkbox
                    if (boxes == 1 ) {
                        document.videos.video.checked = false;
                        document.videos.video.style.display = 'none';
                    } else {
                        document.videos.video[selected[id-1]].checked = false;
                        document.videos.video[selected[id-1]].style.display = 'none';
                    } 
                },
                async: true

            }); 



        } else {
            // timer call myself the same way I was called

            status.innerHTML = "<b class='status'>Upload waiting for trancode.</b>";
            var t=setTimeout("uploadVideos(id, videos, selected, boxes)",3000);
            //var t=setTimeout("alert('waking')",3000);
        }


}

Answer 1

This is a common error in JS beginners. setTimeout admits either one of two kinds of first parameter:
a) Text, in which you can put JS code to be evaluated out of scope (so referenced variables may be undefined), not quite helpful.
b) Function, such as the fix I propose for this, is to replace the line:

setTimeout("uploadVideos(id, videos, selected, boxes)",3000);

with:

setTimeout(function(){
    uploadVideos(id, videos, selected, boxes);
},3000);

As you can see I’m wrapping the function call inside another anonymous function. Why? simply because I need to pass arguments, and otherwise I’d be just calling it, instead of passing as argument.