xmlhttprequest 在函数中无法正常工作

Posted 2023-02-24

【中文标题】xmlhttprequest 在函数中无法正常工作

【英文标题】：xmlhttprequest does not work properly in function

【发布时间】：2012-03-31 06:13:07

【问题描述】：

有谁知道为什么 upload.onprogress 在单独的功能上不能正常工作？

代码正常工作（进度条缓慢移动）：

        xhr.upload.onprogress = function(e) 
            if (e.lengthComputable) 
                progress.value = (e.loaded / e.total) * 100;
            
        ;  

但如果我把它放到函数中，它就不再起作用了：

xhr.upload.onprogress = uploadProgress(event);

function uploadProgress(e) 
    if (e.lengthComputable) 
        progress.value = (e.loaded / e.total) * 100;
    
   

在第二个代码中，进度条在文件上传完成后直接跳到 100%，而不是在上传过程中很好地移动到 100%

---

所以，我已经尝试了提供的解决方案，如果我将函数放入其中，它确实有效。有没有办法把它放在函数之外？

        function uploadFile(blobFile, fileName) 
            ...
            ...

            // Listen to the upload progress for each upload.
            xhr.upload.onprogress = uploadProgress;

            // Progress Bar Calculation why it has to be in uploadFile function..
            function uploadProgress(e) 
                if (e.lengthComputable) 
                    progress.value = (e.loaded / e.total) * 100;
                
                                        

            uploaders.push(xhr);
            xhr.send(fd);
          

        //it does not work if I put it outside the function. is there anyway to do this?  
        function uploadProgress(e) 
             if (e.lengthComputable) 
                 progress.value = (e.loaded / e.total) * 100;
             
           

【参考方案1】：

使用uploadProgress(event);，您调用函数本身并将返回值分配给xhr.upload.onprogress，而不是将其分配为回调函数：

xhr.upload.onprogress = uploadProgress;

【讨论】：

你是对的.. 可变进度在 uploadFile() 中。这就是为什么它不起作用。在javascript中有什么好的做法，而不是将其作为函数内部的函数......这看起来很糟糕。因为 var progress = document.createElement('progress');应该在 uploadFile() 内，因此每次调用它都会产生几个进度条。因此我不能让它成为全局变量

@user1096900 您可以使用匿名函数：xhr.upload.onprogress = function(e) 或仅使用匿名包装函数：xhr.upload.onprogress = function(e) uploadProgress(e, progress);。

【参考方案2】：

在第二个例子中你应该使用

xhr.upload.onprogress = uploadProgress;

不是

xhr.upload.onprogress = uploadProgress(event);

您已经分配了调用函数的结果，而不是对该函数的引用。

【讨论】：

@ComFreek 我试过了，但它仍然无法正常工作。上传完每个chunk后还是直接跳到100%。

将 xhr.upload.onprogress 行放在函数之后，提升可能是代码中的一个因素。

@ComFreek，请查看我的更新代码。那么，有没有办法把它放在函数之外？还是不可能？谢谢

@user1096900 请评论我的回答，否则我不会收到任何通知。您确定变量progress 在函数uploadFile 之外可用还是只是一个局部变量？

【参考方案3】：

在分配为回调之前定义函数怎么样？ JavasCript 在以后定义函数时有时会出现问题。

我的意思是你可以替换：

// Listen to the upload progress for each upload.
xhr.upload.onprogress = uploadProgress;

// Progress Bar Calculation
function uploadProgress(e) 
    if (e.lengthComputable) 
         progress.value = (e.loaded / e.total) * 100;
    

与

// Progress Bar Calculation
function uploadProgress(e) 
    if (e.lengthComputable) 
         progress.value = (e.loaded / e.total) * 100;
    

// Listen to the upload progress for each upload.
xhr.upload.onprogress = uploadProgress;