当前位置:首页 > 防止重复提交,延迟提交ajax,js事件防抖

防止重复提交,延迟提交ajax,js事件防抖

发布于 2018-06-07 阅读 2404 次 Ajax Javascript
问题背景

我们在做联想关键词功能的时候,需要监听输入或者键盘事件,这会导致不断的像后台发送请求,造成资源浪费,甚至有时候带有相同请求参数的请求被发送多次,这并不是我么想要的,所以有时候我们需要在输入内容不再变化的时候再向后台发请求,就会省不少资源。
我在做一个根据用户输入返回饭店列表的功能的时候遇到了这个问题:

下面是我的解决方法:
  1. var fun= {
  2. debounce: function (fn, delay) {
  3. var timer = null;
  4. return function () {
  5. var context = this, args = arguments;
  6. clearTimeout(timer);
  7. timer = setTimeout(function () {
  8. fn.apply(context, args);
  9. }, delay);
  10. };
  11. },
  12. debounceAjax: function(){
  13. var self = this;
  14. getReataurant = self.debounce(function (event) {
  15. // do the Ajax request
  16. }, 200);
  17. }
  18. }

debounce函数有两个参数第一个是放置异步请求的,第二个是,多久之后可以继续请求。

大家想深入了解的可以去了解debounce.js和throttle.js