如果收到新请求，如何取消发送请求

Question

我有一个包含文件的部分。每个文件都可以用箭头向上或向下移动一个位置。目前，每当用户移动文件时，都会向数据库发送一个请求，并更新新订单。因此，如果用户想将底部文件移到顶部，单击"向上"箭头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
}

Answer 1

您可以disable按钮，直到收到来自服务器的响应，这样用户就无法在数据库更新之前再次单击。

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>

或者，您正在寻找一个through函数，该函数与名称建议一样，将调用量限制在您设置的指定数量。所以你只能每秒提出一次新的请求。

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>