首页 > 其他分享 >防抖--如何讲清楚函数防抖?

防抖--如何讲清楚函数防抖?

时间:2022-10-29 18:33:21浏览次数:48  
标签:讲清楚 防抖 函数 -- 代码 键盘 300ms 服务器

首先函数为什么会抖呢?

来列举一个实际的应用场景,例如百度的搜索提示:

你可以看到, 当你在输入框每输入一个字符的时候百度都会不断的根据当下的输入给予新的提示----那么,如果有一个人打字速度非常快

快速地输入了helloworld这个单词仅用了200毫秒 这时键盘事件函数被连续触发了10次 我们把这称之为函数抖动。

----抖动并不是问题,问题是他每按下一次键盘,浏览器都会向服务器做一次查询浏览器一共会向服务器发出10次请求!显然,对于这人来说

这并不是 他想要的...那我们至少浪费了9次查询,无端的增加了服务器的压力。

所以,接下来怎么办呢?

解决思路是这样的:

当用户按下键盘后,我们不要立刻向服务器发起请求,而是等待300ms
如果接下来300ms内,用户不再输入内容----则表示他已经把想要查询的单词写完了
这个时候我们再发起请求查询搜索提示,就大大的避免了浪费----- 这个想法是不是特别棒?!

先看一下代码吧

  • 这是未做防抖处理的代码
  • 这是做了防抖处理的代码(未优化版本)

你仔细的阅读了上面的代码,理解防抖原理还是难--再看一下图片

总结

只要在300ms连续触发键盘事件,新的定时器总是会替代旧的定时器
那么,连续过快的键盘输入,将不会触发多次请求
而是在键盘输入结束后(300ms内不再输入)发出一次请求

回来再看一下代码:

是不是比较好理解呢? 不过这段代码,我们显然写的不够完美,为了解决防抖问题,我们引入了全局变量t,造成了全局变量污染。

于是,我们接下来再对代码做一次优化:

为什么要用自运行函数?

当然是为了解决全局变量的问题啊

标签:讲清楚,防抖,函数,--,代码,键盘,300ms,服务器
From: https://www.cnblogs.com/mahmud/p/16839358.html

相关文章