中止多个xhr请求

Question

考虑这种情况：我有一个项目列表和分页列表，可以按块加载它们。 在每个下一页上，单击新的XHR调用以获取新的项目部分。 当用户单击速度非常快时，我会遇到很多xhrs，实际上没有必要，因为用户只需要最后单击的页面项，它们也会占用资源。 因此，我可以中止除最后一个挂起的请求外的所有请求，每个请求都调用xhr.abort（）。 问题是： 中止多个xhr是否安全？ 我读过服务器可能认为这是某种攻击。 如果可以，与后端人员一起检查哪些设置？

注意：使xhrs的功能已被去抖400毫秒。

Answer 1

与取消待处理的xhr请求相比，最好在发送请求之前先将事件减益几百毫秒。 每次您按下按钮时，都会重置一个计时器，该计时器会延迟xhr请求

 const button = document.querySelector('#button') const url = 'https://jsonplaceholder.typicode.com/posts/1' const request = (function() { // save the current ajax request in the closure let ajax = null return function(url, params, cb) { if (ajax) { // if there is a current request cancel it ajax.abort() console.log('aborted ajax request') } // set a new xhr ajax = new XMLHttpRequest ajax.onreadystatechange = function() { if (ajax.readyState === 4 && ajax.status === 200) { // run the callback with the response cb(JSON.parse(ajax.responseText)) // remove the previous request ajax = null } } ajax.open('GET', url, true) ajax.send(params) } })() const clickCallback = debuff(function(e) { console.log('clicked') // make the xhr request request(url, null, function(response) { console.log('response', response) }) }, 100) button.addEventListener('click', clickCallback, false) function debuff(fn, delay) { let timer = null return function(e) { clearTimeout(timer) timer = setTimeout(e => fn(e), delay || 250, e) } } 

 <button id="button">debuffed click</button>