keyup事件规避多次调用服务

背景:vue2.0框架

目前存在的问题

  1. 键盘每押下一次调用接口,请求频率过高,增加服务器压力
  2. 多次调用接口,响应时间短的先返回,响应顺序和请求顺序对应不上。

如下图所示:

keyup事件规避多次调用服务_第1张图片
1.png
把响应的数据打印到控制台,发现响应顺序和请求顺序不一致,第一个发起的请求是响应最慢的。导致页面展示的数据不正确

解决方案1

// search.vue



解决方案2

lodash官网:https://lodash.com/

Lodash提供了函数节流(throttle)、函数去抖(debounce)等。这里使用函数节流(throttle)解决上述问题。

安装Lodash

npm install lodash

使用throttle

// search.vue



如下图所示:发了三次请求

keyup事件规避多次调用服务_第2张图片
2.png

你可能感兴趣的:(keyup事件规避多次调用服务)