请教一下防抖动问题
发布于 2 年前 作者 MeetTheBest 2044 次浏览 来自 问答
  • 使用场景 输入框输入值后500ms内没变化, 将值作为查询条件请求数据

  • 问题描述

  1. 输入值为1, 请求到500条数据, 耗时3s, 待数据返回重新渲染

  2. 距上次输入1后,经过1s后, 输入2,(当前查询条件为12) 请求到5条数据, 耗时300ms, 待数据返回重新渲染

这个过程中, 第二次数据返回是时间比第一次快, 所以最终的情况是输入框的值为12, 但是渲染的数据为1的请求数据

  • 解决方案 我目前使用的一个解决方案是使用XMLHttpRequest.abort(), 来终端第一个请求

XMLHttpRequest.abort()

感觉这个方法比较局限,所以想问一问各位大佬, 有没有更适合的觉得方案?

3 回复

典型的进程异步问题,一般要附加数据: 发送的时候加个seq number,每次发送都增加1。后端返回时也带着seq number。 前端收到数据后检查seq number,如果和本地的不一样就忽略掉。 对于后端也可以优化,查询完数据返回前(或查询中)发现seq number变化了则终止操作。

@LanserShi 谢谢你的回答, 一个不错的可行方案

回到顶部