未在document.ready jQuery代码中定义的Javascript函数

Question

I've included jquery in my script and am now trying to make a jquery version of this upload progress bar script: http://www.ultramegatech.com/2008/12/creating-upload-progress-bar-php/

Here's my attempt:

$(document).ready(function () {

    function startProgress(uid) {
        console.log("starting progress");
        setTimeout('getProgress("' + uid + '")', 500);
        //some more stuff
    }

    function getProgress(uid) {
        console.log("getting progress");
        $.ajax({
            type: "GET",
            url: 'upload_getprogress.php?uid=' + uid,
            success: function (msg) {
                progress = msg;
                setTimeout('getProgress("' + uid + '")', 100);
                // do some more stuff
            }

        });
    }

    $('#upload').submit(function () {
        startProgress('<?php echo $uid; ?>');
    });
});

But I'm getting this error:

Uncaught ReferenceError: getProgress is not defined

How is that?

I tried to put the functions outside of document.ready() , but it didn't help. I even went and defined getProgress at the beginning of the inside of startProgress but it doesn't seem to recognize the function. What am I doing wrong?

Answer 1

getProgress() is defined within the scope of the callback to document.ready() . If you pass a string argument to setTimeout() this is evaluated in the global scope. So you method is not visible from there.

You could change your code, to use an anonymous function like this:

 setTimeout( function() {
   getProgress( uid); 
 }
 , 100);

Answer 2

Haven't been able to double-check, but I'm guessing it's because of the scope of the submit callback. Try something along these lines;

$(document).ready(function(){   
    $('#upload').submit(function(){ window.startProgress('<?php echo $uid; ?>'); });
});

var startProgress = function(uid) {
       console.log("starting progress");
       setTimeout('getProgress("' + uid + '")', 500);
       //some more stuff
};

var getProgress = function(uid) {
    console.log("getting progress");
    $.ajax({  type: "GET", 
        url: 'upload_getprogress.php?uid=' + uid, 
        success: function(msg) {   
            progress = msg;
            setTimeout('getProgress("' + uid + '")', 100);
                    // do some more stuff
        }

    });
};

window.startProgress = startProgress;
window.getProgress = getProgress;

Answer 3

if you use the setTimeout function like
setTimeout('getProgress("' + uid + '")',500) ,

you must put the function getProgress in global scope , if you use setTimeout function like setTimeout( getProgress(uid),500) ,

you can define the function getProgress inside jQuery ready function

Answer 4

Please use:

setTimeout(function() { getProgress( uid ); }, 500 )

That should work fine.

Answer 5

function getProgress(uid) is defined inside $(document).ready() so that it is in the private scope not in global scope. So to use it, just move it to global.