忽略先前请求响应的前端JavaScript模式

我不是什么前端开发人员——用户可能会单击submit按钮来提交AJAX请求（这是一个SPA），如果用户想尝试其他设置，几秒钟后可能会再次单击该按钮。我可以添加一个覆盖，防止他们提交，直到回复回来。但是假设我不想使用overlay方法——是否有一些编程模式可以用来（可能是闭包？）忽略所有的响应，除了最近请求的响应

以下是一些代码作为示例：

define([

        '+appState',
        '#allModels',
        '#allCollections',
        'form2js',
        'ejs',
        'underscore',
        'react',
        '#allFluxActions'
    ],

    function (appState, models, collections, form2js, EJS, _, React, allFluxActions) {

        var actions = allFluxActions['FileAction'];

        var UploadFileView = React.createClass({


            handleSubmit: function (e) {

                e.preventDefault();

                this.props.clearUploadResult();

                var data = new FormData();
                data.append('file-0', this.state.file);


                if (!this.props.mappingType) {
                    alert('undefined mapping type.');
                    return;
                }
                else {
                    console.log('mapping type selected:', this.props.mappingType);
                }

                this.props.setStatus('PENDING');

                const self = this;

                return $.ajax({

                    type: 'POST',
                    url: 'http://172.x0.x.x1:4000/upload',
                    data: data,
                    headers: {
                        'x-baymax-mapping-type': this.props.mappingType
                    },
                    cache: false,
                    contentType: false,
                    processData: false

                }).done(function (resp) {
                    console.log(resp);
                    if (resp && resp.responseJSON && resp.responseJSON.success) {
                        self.props.setUploadResult('No upload errors, all clear.');
                    }
                    else if (resp && resp.responseJSON && resp.responseJSON.error) {
                        self.props.setUploadResult(resp.responseJSON.error);
                    }
                    else {
                        self.props.setUploadResult(resp);
                    }

                }).fail(function (resp) {
                    if (resp && resp.responseJSON && resp.responseJSON.error) {
                        self.props.setUploadResult(resp.responseJSON.error);
                    }
                    else {
                        self.props.setUploadResult('Fail - unexpected server error.');
                    }
                });

            },

            handleImageChange: function (e) {
                e.preventDefault();

                this.props.clearUploadResult();

                var reader = new FileReader();
                var file = e.target.files[0];
                var fileName = document.getElementById('fileName');
                fileName.innerHTML = file.name;
                console.log('File Data:', file);

                reader.onloadend = () => {
                    this.setState({
                        file: file
                    });
                };

                reader.readAsDataURL(file);
            },

            render: function () {

                return (
                    <div className='row fileUploadForm'>
                        <form onSubmit={this.handleSubmit}>
                            <div className='nine columns'>
                                <label className='fileUpload'>File Upload
                                    <input type='file' name='file' id='fileUpload' onChange={this.handleImageChange}/>
                                </label>
                                <span id='fileName'></span>
                                <div id="upload-submit-button-div" className="upload-submit-button-div">
                                    <button className='button-primary fileFormSubmit' type='submit'
                                            onClick={this.handleSubmit} value='Submit'>Submit
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                )
            }

        });


        return UploadFileView;

    });

定义([
“+appState”，
"所有型号",，
“#所有集合”，
‘form2js’，
“ejs”，
“下划线”，
“反应”，
“#所有FluxActions”
],
函数（appState、模型、集合、form2js、EJS、3;、React、allFluxActions）{
var actions=allFluxActions['FileAction']；
var UploadFileView=React.createClass({
handleSubmit:函数（e）{
e、 预防默认值（）；
this.props.clearUploadResult（）；
var data=new FormData（）；
data.append（'file-0'，this.state.file）；
if（！this.props.mappingType）{
警报（“未定义的映射类型”）；
返回；
}
否则{
console.log（'选择的映射类型：'，this.props.mappingType）；
}
此.props.setStatus（“待定”）；
const self=这个；
返回$.ajax({
键入：“POST”，
网址：'http://172.x0.x.x1:4000/upload',
数据：数据，
标题：{
“x-baymax-mapping-type”：this.props.mappingType
},
cache:false，
contentType:false，
processData:false
}).完成（功能（resp）{
控制台日志（resp）；
if（resp&&resp.responseJSON&&resp.responseJSON.success）{
self.props.setUploadResult（'无上传错误，全部清除'）；
}
else if（resp&&resp.responseJSON&&resp.responseJSON.error）{
self.props.setUploadResult（响应错误）；
}
否则{
自身道具设置加载结果（resp）；
}
}).失败（功能（resp）{
if（resp&&resp.responseJSON&&resp.responseJSON.error）{
self.props.setUploadResult（响应错误）；
}
否则{
self.props.setUploadResult（'失败-意外的服务器错误'）；
}
});
},
handleImageChange：功能（e）{
e、 预防默认值（）；
this.props.clearUploadResult（）；
var reader=new FileReader（）；
var file=e.target.files[0]；
var fileName=document.getElementById（'fileName'）；
fileName.innerHTML=file.name；
log（'文件数据：'，文件）；
reader.onloadend=（）=>{
这是我的国家({
档案：档案
});
};
reader.readAsDataURL（文件）；
},
渲染：函数（）{
返回(
文件上传
提交
)
}
});
返回上传文件视图；
});

---

当用户单击submit（选择文件后）时，响应可能需要5-10秒。我们的测试工程师会变得不耐烦，并在最后一个响应返回之前尝试一些其他文件。单击“提交”按钮后，如何可以忽略以前的响应？我在考虑使用闭包的某种时间戳技巧，但我不确定。有点难办。

您可以存储$.ajax请求，然后在发送下一个请求之前中止它（）

...
let lastAjax = null;
...
var UploadFileView = React.createClass({
  handleSubmit: function (e) {
    ...  
    if (!!lastAjax) {
      lastAjax.abort();
    }

    lastAjax = $.ajax({
      ...
    });

    return lastAjax;
  },
  ...
})

---

您可以存储$.ajax请求，然后在发送下一个请求之前中止它（）

...
let lastAjax = null;
...
var UploadFileView = React.createClass({
  handleSubmit: function (e) {
    ...  
    if (!!lastAjax) {
      lastAjax.abort();
    }

    lastAjax = $.ajax({
      ...
    });

    return lastAjax;
  },
  ...
})

---

你必须做4件事：

• 选择文件时，将触发文件输入的更改事件，所有挂起的请求
• 在提交时，将禁用项添加到按钮（如有必要，稍后将其删除），这样您就不会有重复的请求
• 选择文件后，（重新）将仅执行的事件处理程序附加到submit按钮，并删除其disabled属性
• 对于用户体验，添加微调器/加载器

---

你必须做4件事：
• 选择文件时，将触发文件输入的更改事件，所有挂起的请求
• 在提交时，将禁用项添加到按钮（如有必要，稍后将其删除），这样您就不会有重复的请求
• 选择文件后，（重新）将仅执行的事件处理程序附加到submit按钮，并删除其disabled属性
• 对于用户体验，添加微调器/加载器