连续的http请求如何保证拿到的最终结果是正确的？

Question

场景描述：
一个输入框，用户输入keyup的时候就会发送请求，然后拿到返回值渲染在元素中。
如果用户输入a之后，对应的返回值应该是 'responseA'。此时用户用输入ab，对应的返回值应该是'responseAB'，然后用户停止输入了，正常情况下，元素中渲染的值应该是'responseAB'。
但是如果第一次的请求在第二次请求之后才响应，也就是说先拿到'responseAB'在拿到'responseA'。那么渲染的值就不对了。请问这种情况下改怎么处理呢？

我开始的想法是封装一个promise，等每次的响应结束之后再执行第二次，但是有个问题就是这样做的话请求就是串行的，有可能请求响应时间会很长，阻止页面渲染。

请各位大佬支招

Answer 1

ajax请求是可以abort的，题主不会不知道吧，第二次输入的时候先把第一次的abort掉然后再发请求，这样始终拿到的都是最后一次的返回值

Answer 2

站内搜索：防抖 节流
https://segmentfault.com/a/11...

Answer 3

可以让用户输入结束延迟几秒执行网络请求, 如果用户持续输入, 刷新延迟时间. 这就保证了用户在输入 a 的时候不会立刻触发请求, 而是有个延迟时间, 在延迟时间内如果用户输入了 b, 那么第一次请求也不会触发, 只有用户不继续输入而过了延迟时间才触发请求, 是一个典型的防抖问题.

参考代码:

function ajax(content) {
    console.log('ajax request ' + content)
}

function debounce(fun, delay) {
    return function (args) {
        let that = this
        let _args = args
        clearTimeout(fun.id)
        fun.id = setTimeout(function () {
            fun.call(that, _args)
        }, delay)
    }
}

debounce(ajax, 500)

链接: https://juejin.im/post/5b8de8...