input 输入框频繁请求接口，怎么正确的显示最后一次接口返回的数据？

面试题系列

阿里面试题中有一问： input 输入框频繁请求接口，怎么正确的显示最后一次接口返回的数据？

1. 后端返回请求值（最简单）

前端请求接口的时候会把 input 输入框中的值传给后端，此时后端返回接口数据时把前端传入的值返回回去，页面渲染时只需要进行判断即可。

2. 终止上一次请求

当再次请求的时候把上次的请求终止掉：

1. ajax：abort()
2. axios: CancelToken
3. fetch：AbortController

百度用的就是这种取消请求的方式

js：ss1.bdstatic.com/5eN1bjq8AAU…

3. 定义一个全局 ID，接口请求之前自增，然后请求接口闭包保存此值，返回之后进行两者判断。

此种方式就是不用后端返回值，前端存储对应的值信息，进行判断处理

实现

let id = 1
function ajax() {
  ++id
  console.log(id)
  function getData () {
    const newId = id
    const time = Math.random() * 5000 | 0 // 定义一个随机值
    console.log('time', time)
    setTimeout(() => {
      console.log('id newId', id, newId)
      if (id === newId) { // 在此进行数据处理
        console.log('this is true-->', id)
      }
    }, time)
  }
  getData()
}
// click 频繁点击出发函数
document.getElementById('ajaxbtn').onclick = function () {
  ajax()
}