手把手教你实现一个防抖函数(debounce)

前言：防抖函数在日常开发中属于是一个非常非常重要的知识点。通常在一个项目的最开始构建的时候，都会在 utils文件夹下备上这样一个函数，来为以后做准备。（tips：utils 在大部分翻译软件内好像都叫跑龙套的，这个翻译不是那么合理。这个单词在这个场景下更像存放工具类的函数的文件夹。通常我们会放一些比如格式化时间，格式化文件大小格式，节流之类的函数。）

这篇文章原意是想紧随在姊妹篇文章节流函数的原理之后发布的。但是那时候自己对闭包、高阶函数的概念不是特别清楚，害怕误导读者，故拖了比较久的才发布这个重要知识点。

注：本文不会讲解防抖的高级写法，只会一步一步带你理清思路，如何拓展功能还需各位看官举一反三。

一. 什么是防抖？使用场景是什么？

首先我们要知道，这里的防抖具体指的是什么？我们假设一个场景，这里就拿我们日常最常用的功能，《搜索〉来举例子。

2. 我们用 v-model 指令绑定这个 <input> 框。然后绑定一个根据用户输入的关键词，去后端数据库检索数据的模拟函数。（这里我们用 console 代替）。

然后我们用 watch 去监视 searchKeyword 的变化，每当用户输入关键词后，我们就向后端发起一次请求。

3. 我们可以非常明显的看到，在这种情况下。我仅仅只是想最后搜索 hanzhenfang 这几个关键词，但是我在输入每一个字符的时候，都会去后端请求一次，数据量小还好，如果数据量过大的话，由于前几次的请求都是毫无意义的，势必会造成性能和资源上的浪费。

4.什么？你说为什么不等最后点击搜索按钮的时候再去搜索？ emm... 这个确实是可以。但是突然有一天，产品经理说：“这个搜索框如果有联想功能的话就更好了！我们要赶超百度，赛过谷歌！”你怎么办嘞？目前的情况到不是不行

手把手教你实现一个防抖函数(debounce)相关推荐

防抖函数Debounce实现
实现原理就是利用定时器,函数第一次执行时设定一个定时器,之后调用时发现已经设定过定时器就清空之前的定时器,并重新设定一个新的定时器,如果存在没有被清空的定时器,当定时器计时结束后触发函数执行. 手写一 ...
debounce实现 js_javascript防抖函数debounce详解
定义及解读防抖函数 debounce 指的是某个函数在某段时间内,无论触发了多少次回调,都只执行最后一次.假如我们设置了一个等待时间 3 秒的函数,在这 3 秒内如果遇到函数调用请求就重新计时 3 ...
python手机版做小游戏代码大全-Python大牛手把手教你做一个小游戏，萌新福利！...
原标题:Python大牛手把手教你做一个小游戏,萌新福利! 引言最近python语言大火,除了在科学计算领域python有用武之地之外,在游戏.后台等方面,python也大放异彩,本篇博文将按照正规 ...
python k线合成_手把手教你写一个Python版的K线合成函数
手把手教你写一个Python版的K线合成函数在编写.使用策略时,经常会使用一些不常用的K线周期数据.然而交易所.数据源又没有提供这些周期的数据.只能通过使用已有周期的数据进行合成.合成算法已经有一个 ...
第五十八期:从0到1 手把手教你建一个区块链
近期的区块链重回热点,如果你想深入了解区块链,那就来看一下本文,手把手教你构建一个自己的区块链. 作者:Captain编译近期的区块链重回热点,如果你想深入了解区块链,那就来看一下本文,手把手教你构 ...
手把手教你撸一个Web汇率计算器
手把手教你撸一个Web汇率计算器前言前段时间刚接触到前端网页开发,但是对于刚入门的小白而言,像flask.Django等这类稍大型的框架确实不太适合,今天这个Dash是集众家之长于一体的轻量化We ...
还没理解微前端？手把手教你实现一个迷你版
大厂技术高级前端 Node进阶点击上方程序员成长指北,关注公众号回复1,加入高级Node交流群最近看了几个微前端框架的源码(single-spa[1].qiankun[2].micro- ...
手把手教你做一个Java贪吃蛇小游戏
大家好,我是孙不坚1208,这篇博客给大家分享一下:如何做一个贪吃蛇小游戏(Java版)的exe应用程序,希望能给需要帮助的朋友带来方便. 手把手教你做一个Java贪吃蛇小游戏的exe应用程序一.J ...
手把手教你编写一个上位机
关注+星标公众号,不错过精彩内容转自 | 嵌入式大杂烩嵌入式开发,基本都会用到有一些上位机工具,比如串口助手就是最常用的工具之一. 那么,今天分享有一篇由ZhengN整理的用Qt写的简单上位机教程 ...

手把手教你实现一个防抖函数(debounce)

手把手教你实现一个防抖函数(debounce)相关推荐

最新文章

热门文章