如果新请求传入，如何取消发送请求？
提问于 2020-09-23 01:05:03
我有一个有文件的部分。每个文件可以用箭头移动一个较高或更低的位置。当前，每当用户移动文件并更新新订单时，都会向数据库发送请求。因此，如果用户想将底部文件移动到顶部，单击“向上”箭头10次，就会发送10个请求。
我怎么才能发送更少的请求呢？
我的第一个想法是创建带有订单号的请求，等待1秒，创建第二个请求，如果它们是相同的(用户没有继续更改订单)，然后发送它，如果没有，再等待另一个秒，然后再进行比较。但这似乎不是一件好事。还有别的办法吗？
$ctrl.saveFileOrder = function() {
var firstRequest = [];
for(var i = 0; 1 < $ctrl.fileArray.length; i++) {
firstRequest.push({$ctrl.fileArray[i].id, $ctrl.fileArray[i].orderNumber});
}
var secondRequest = [];
while(firstRequest != secondRequest) {
//put thread to sleep for 1 second here
for(var i = 0; 1 < $ctrl.fileArray.length; i++) {
secondRequest.push({$ctrl.fileArray.id[i], $ctrl.fileArray.orderNumber[i]});
}
}
//send the final request
}
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-09-23 01:14:53
您可以在收到来自服务器的响应之前使用disable按钮，这样用户就不能在更新DB之前再次单击。
const buttons = document.querySelectorAll('.js-move');
/**
* Simulation of a request with a 2 second duration
*/
const sendRequest = value => new Promise(resolve => {
console.log(`Updating to DB: ${value}`);
buttons.forEach(button => button.disabled = true);
setTimeout(() => {
console.log('Update done');
buttons.forEach(button => button.disabled = false);
resolve();
}, 2000);
});
buttons.forEach(button => {
button.addEventListener('click', event => {
const { value } = event.target;
sendRequest(value);
});
});<button class="js-move" value="-1">Move up</button>
<button class="js-move" value="+1">Move down</button>
或者，您正在寻找一个节流函数，它像名称所建议的那样，限制了由您设置的特定数量的调用量。所以每秒钟只有一次你才能提出一个新的请求。
const throttle = (callback, wait, immediate = false) => {
let timeout = null;
let initialCall = true;
return (...args) => {
const callNow = immediate && initialCall
const next = () => {
callback(...args);
timeout = null;
}
if (callNow) {
initialCall = false;
next();
}
if (!timeout) {
timeout = setTimeout(next, wait);
}
}
}
const buttons = document.querySelectorAll('.js-move');
/**
* Mock function where you send a request.
*/
const sendRequest = value => {
console.log(`Updating to DB: ${value}`);
}
/**
* Create throttled version of your request.
* The number indicates the interval in milliseconds between
* calling the sendRequest function.
*/
const throttledRequest = throttle(sendRequest, 1000, true);
buttons.forEach(button => {
button.addEventListener('click', event => {
const { value } = event.target;
throttledRequest(value);
});
});<button class="js-move" value="-1">Move up</button>
<button class="js-move" value="+1">Move down</button>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64024527
复制相关文章
点击加载更多
腾讯云开发者
