在 for 循环执行直到完成时显示加载

Question

我正在做一个带有文件堆栈的字计数器文件，我想在计算字数时显示加载并在完成后隐藏它。

所以我在 HTML 中有这个：

<div id="loading" style="display:none;clear:both;">
<img src="loading.gif">
</div>
<input id="ff" type="filepicker" data-fp-apikey="<myAPI>" data-fp-mimetypes="image/*,application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" data-fp-container="modal" data-fp-multiple="true" data-fp-button-class="btn btn-primary l-align" data-fp-button-text="Upload" data-fp-services="SKYDRIVE,COMPUTER,URL,GOOGLE_DRIVE,GMAIL" data-fp-language="es">
<div id="result"></div>

在 JS 中，我有这个：

$("document").ready(function(){

$("#ff").change(function(){

    var out='';
    for(var i=0;i<event.fpfiles.length;i++){
        var n = i+1;
        out+='<a target=_blank href=' + event.fpfiles[i].url + '>' + '<button type=button class=btn-sc2><i class=fa fa-file-text aria-hidden=true></i> ' + event.fpfiles[i].filename + '</button></a>';out+=' '

        if(event.fpfiles[i].mimetype=="image/jpeg"){

            $.post("filecount.php",{
                url: event.fpfiles[i].url
            }).done(function(response){
                //functions to count words
            });//post               

        } else if(event.fpfiles[i].mimetype=="application/msword"){

            var link = event.fpfiles[i].url;
            var idfile = link.substr(link.lastIndexOf("/")+1);
            var lcconvert = "https://process.filestackapi.com/output=format:txt/"+idfile;

            $("#dkd").load(lcconvert, function(){
                $.post("filecount2.php",{
                    url: $("#dkd").val()
                }).done(function(response){
                   //functions to count words
                });//post                   
            });
        }
    };//for
   $("#result").html(out);
});//#ff
});

我想把 '$("#loading").show();' 和 '$("#loading").hide();' 在 post 功能的任何部分，但它不起作用或仅在 post 功能完成时出现但不隐藏。

我想要一些帮助。

Answer 1

ajaxStart/Stop 函数将在您执行任何 Ajax 调用时触发。

从 jQuery 1.8 开始，文档指出.ajaxStart/Stop应该只附加到文档。 这会将上述代码段转换为：

var $loading = $('#loadingDiv').hide();
$(document)
  .ajaxStart(function () {
    $loading.show();
  })
  .ajaxStop(function () {
    $loading.hide();
  });

在您的具体情况下：

$loading.show();
$.post("filecount.php",{
    url: event.fpfiles[i].url
}).success(function(response){
    //functions to count words
    $loading.hide();
});//post 

在调用之前显示它并在成功函数或错误函数中隐藏它。