关于前端:JS函数防抖

当你在输入框每输出一个字符的时候

百度都会一直的依据当下的输出给予新的提醒

那么,如果有一个人打字速度十分快

输出了helloworld这个单词 只用了200ms

这是键盘事件函数被触发了10次

咱们把这个称为 函数抖动

他每按下一次键盘 浏览器都会向服务器做一次查问

间断触发了10次申请,显示对这个手速特地快的人 这不是他想要的。

咱们至多节约了9次查问 减少了服务器的压力。

解决思路是这样的:

当用户按下键盘后 不要立刻向服务器发动申请,

期待300ms,如果没有持续输出 阐明输出内容结束

这时候在向服务器发送申请。

就大大的防止了节约

例子:

// 这是未做防抖解决的代码:
inputEle.addEventListener("keyup", function(e){
    //ajax(...); 发送申请到服务器  
})
// 这是做了防抖解决的代码
this.$refs.inputEle.addEventListener(
      "keyup",
      (function (e) {
        //这是一个自运行函数
        var t = null;
        return function () {
          //真正的事件函数在这里
          clearTimeout(t); //每次触发,都把后面的定时器敞开,只管第一次定时器并不存在
          t = setTimeout(function () {
            //开启新的定时器
            //ajax(...); 发送申请到服务器
            console.log("抖动");
          }, 300);
        };
      })()
    );

  },

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理