请教一下防抖动问题
-
使用场景 输入框输入值后
500ms内没变化, 将值作为查询条件请求数据 -
问题描述
-
输入值为1, 请求到500条数据, 耗时3s, 待数据返回重新渲染
-
距上次输入1后,经过1s后, 输入2,(当前查询条件为12) 请求到5条数据, 耗时300ms, 待数据返回重新渲染
这个过程中, 第二次数据返回是时间比第一次快, 所以最终的情况是输入框的值为12, 但是渲染的数据为1的请求数据
- 解决方案
我目前使用的一个解决方案是使用
XMLHttpRequest.abort(), 来终端第一个请求
感觉这个方法比较局限,所以想问一问各位大佬, 有没有更适合的觉得方案?
3 回复
典型的进程异步问题，一般要附加数据： 发送的时候加个seq number，每次发送都增加1。后端返回时也带着seq number。 前端收到数据后检查seq number，如果和本地的不一样就忽略掉。 对于后端也可以优化，查询完数据返回前（或查询中）发现seq number变化了则终止操作。
