javascript变量被多次调用函数覆盖

Question

I have the following function which checks for the presence of a file. It's called 4 times, one after the other, checking for different files. It works fine for the first file, but doesn't work for subsequent ones. I think it must be because of the position of local / global variables, but can't figure it out... any ideas?

 <script>

function checkfile(fileNamePassed){

    var timerForLoadingResult=setInterval( function() { checkServerForFile(fileNamePassed); }, 4000 );
    function checkServerForFile(fileNamePassed) {    
          $.ajax({
                    url: 'https://myserver.com/'+fileNamePassed+'.txt',
                    type:'HEAD',
                    error: function()
                    {

                    },
                    success: function()
                    {
                        $("#"+fileNamePassed).hide();
                        clearInterval(timerForLoadingResult)  
                    }
                });
            }

}

</script>

Answer 1

Remove your checkServerForFile from checkfile and pass in a reference to timerForLoadingResult when calling checkServerForFile .

I edited my answer to reflect some real data since I don't have a back-end to work with, but the concept is the same.

Removing the dependency of timerForLoadingResult and passing it in as a reference forces checkServerForFile to use it's referenced value instead of them all shares the same timerForLoadingResult .

You might also want to change the name of timerForLoadingResult since setInterval returns an ID .

From the Docs :

It returns an interval ID which uniquely identifies the interval, so you can remove it later by calling clearInterval().

 function checkfile(idPassed) { var timerForLoadingResult = setInterval(function() { checkServerForFile(idPassed, timerForLoadingResult); }, 4000); } function checkServerForFile(idPassed, timerForLoadingResult) { $.ajax({ url: 'https://api.github.com/users/justinjmnz', error: function() { }, success: function(data) { console.log(idPassed + " found!"); // Your file was found $("#" + idPassed).append('<img src="' + data.avatar_url + '" height="50" width="50"/ >'); clearInterval(timerForLoadingResult) } }); } checkfile("foo"); checkfile("bar"); checkfile("foobar"); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="foo"> </div> <div id="bar"> </div> <div id="foobar"> </div>