Javascript submit（）函数干扰提交事件

我试图在浏览器通过POST请求下载文件时，在文件链接旁边显示下载gif。当前，单击文件链接什么也不做。如果我更改

.submit（函数（）{…}）

只需

.submit（）

然后下载文件，但不显示正在加载的gif。如果我将加载gif设置为

.show（）在
.submit（）之前，则在文件下载后才会显示

这是我当前的结构和JS

HTML

<a class="file" data-location="directory/file">File.xlsx</a>
<span class="download_loader"></span>

和一些超时函数来管理流。最终的用户体验很好，可以很好地显示和隐藏下载的gif。请看这里：

最终JS代码

// Download Function
function download(url, data, method){
    //url and data options required
    if( url && data ){ 
        //data can be string of parameters or array/object
        data = typeof data == 'string' ? data : $.param(data);
        //split params into form inputs
        var inputs = '';
        $.each(data.split('&'), function(){ 
            var pair = this.split('=');
            inputs+='<input type="hidden" name="'+ pair[0] +'" value="'+ pair[1] +'" />'; 
        });
        //send request
        $('<form action="'+ url +'" method="'+ (method||'post') +'">'+inputs+'</form>')
        .appendTo('body').submit().remove();
    };
};

// Download File
$(document).on('click', 'a.file', function () {
    var location = $(this).data("location");
    var name = $(this).html();
    var cell = $(this).closest('td');
    $('<span class="download_loader"></span>').appendTo(cell);

    setTimeout(function(){
        download('FileManager/download.php','name='+name+'&location='+location,'post');
    }, 1000);

    setTimeout(function(){
        $("span.download_loader").fadeOut();
    }, 2000);
});

//下载功能
函数下载（url、数据、方法）{
//需要url和数据选项
如果（url和数据）{
//数据可以是参数字符串或数组/对象
数据=数据类型==“字符串”？数据：$.param（数据）；
//将参数拆分为表单输入
var输入=“”；
$.each（data.split（'&'），function（）{
var pair=this.split（'='）；
输入+=''；
});
//发送请求
$（''+输入+''）
.appendTo（'body'）.submit（）.remove（）；
};
};
//下载文件
$（文档）。在（'click'，'a.file'，函数（）{
变量位置=$（此）.data（“位置”）；
var name=$（this.html（）；
var单元格=$（this）.closest（'td'）；
$（''）。附加到（单元格）；
setTimeout（函数（）{
下载（'FileManager/download.php'，'name='+name+'&location='+location，'post'）；
}, 1000);
setTimeout（函数（）{
$（“span.download_loader”）.fadeOut（）；
}, 2000);
});
我会这样做：

var form = $("<form/>", {
    action : "FileManager/download.php",
    method : "POST",
    id : "temp_download_form"
});

//add inputs the same way and append to form... form.append(input1)... form.append(input2)

form.on('submit', function () {
    loader.show();
});

var form=$（“”{
操作：“FileManager/download.php”，
方法：“张贴”，
id:“临时下载表格”
});
//以相同的方式添加输入并附加到表单。。。表单。追加（输入1）。。。form.append（input2）
表单（'submit'，函数（）{
loader.show（）；
});

但是。。。问题是，这是一个异步操作，因此不容易判断操作何时完成

下面是一篇关于检查表单何时完成的文章


但是。。。我将使用$.ajax提交表单，并使用success方法触发删除加载图标

下面是关于使用jQuery的$ajax的文档

为什么你没有在标签中添加href？在浏览器锁定之前，默认方法.File可能没有时间加载，因为您正在发布表单，页面将刷新…@C-link它不需要，只是代码膨胀。@epascarello表单块周围的延迟函数是否允许足够的分隔来填充加载程序gif？@georgeoriz没有href的链接将不会加下划线，也不会显示指针光标。ajax不能很好地用于文件下载，因为您无法将标题传递到浏览器。有一些查询插件试图解决这个问题，尽管它们提交的表单与我尝试的表单相同。在第一个示例中，表单不是自动提交的，对吗？它只对提交事件有约束力，对吗？谢谢你的回答，我能够根据你的建议想出一些东西。我已经用最后的代码编辑了这个问题。
var form = $("<form/>", {
    action : "FileManager/download.php",
    method : "POST",
    id : "temp_download_form"
});

//add inputs the same way and append to form... form.append(input1)... form.append(input2)

form.on('submit', function () {
    loader.show();
});