我不是一个前端开发者--用户可能会点击一个提交按钮来提交一个 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;
});
当用户单击提交(在选择文件之后)时,响应可能需要5-10秒。我们的测试工程师会变得不耐烦,在最后一个响应返回之前尝试一些其他文件。点击提交按钮后,如何忽略以前的响应?我正在考虑使用闭包的某种时间戳技巧,但我不确定。有点难住了。
3条答案
按热度按时间wljmcqd81#
您可以存储$. AJAX 请求,然后在发送下一个请求之前中止()它。
krugob8w2#
你必须做四件事:
jbose2ul3#
我知道这真的很古老,但它出现在我寻找这种技术的时候。
我相信你可以将一个全局变量与一个本地副本进行比较,看看响应是否“陈旧”,如果是,就忽略它: