防抖c语言,花式解说防抖函数debounce的实现

歪式絮叨：原本打算只用一篇文章总结下防抖和节流的，但是写着写着发现挺有意思的。所以准备会分成 3-4 篇来写了，单独的防抖和节流的实现，然后在去分享一下知名库的源码。今天先跟歪马一起看看防抖的实现吧。其他内容敬请期待~！

歪老师：“马同学，防抖和节流你知道吗？起来说一下。”

马同学：“老师，我不知道呀，都没听说过。”

歪老师：“好吧，那今天我们就先来讲讲防抖吧。先从基本的概念以及使用场景说起”。

一、概念

防抖 debounce 和节流 throttle 的概念并不是 JS 所特有的。它们是在对函数持续调用时进行不同控制的两个概念。今天我们先介绍防抖。

防抖是为了避免用户无意间执行函数多次。比如有些用户喜欢在点击的时候使用 double click 双击，或者就是手抖连续点了两下，这就可能会导致一些意想不到的问题。

通过防抖可以在事件触发一定时间后没有再次触发同一事件时，再去执行相关的处理函数。

就好比你去菜市场买菜，到某个小摊上开始挑菜，接连挑好一袋又一袋放在摊主面前，摊主并不会每一袋都给你结账，而是会等着问你：“还要别的吗？”，等你确认完不要了，才会结账。

你可以通过歪马写的这个 demo 查看常规无限制函数调用和防抖(节流)之后的可视化对比，完整 demo 地址如下：

codesandbox.io/s/yibubupia…。

二、作用&应用场景

在具体实现之前，我们先简单了解一下防抖和节流的作用以及在哪些业务中会用到。

防抖和节流(这里先包含它吧)主要能够给我们带来以下好处：

优化用户体验：适时反馈，避免 UI 渲染阻塞，浏览器卡顿

提升页面性能：避免页面渲染卡顿，减少服务器压力，防范恶意触发

防抖的应用场景有以下几个方面：

输入框内容联想 --> 适时反馈、减少服务器压力

window.resize --> 避免 UI 渲染阻塞，浏览器卡顿

提交表单 --> 减少服务器压力，防范恶意触发

歪老师：“概念我们就介绍到这，下面我们来看看该如何实现。”

三、如何实现防抖

歪老师：“防抖可以通过计时器来实现，通过setTimeout来指定一定时间后执行处理函数，如果在这之前事件再次触发，则清空计时器，重新计时。”

function debounce(fn, wait) {

let timerId = null;

return function(...args) {

if (timerId) clearTimeout(timerId);

timerId = setTimeout(() => {

fn.call(this, args);

}, wait);

};

}

复制代码

歪老师：“上面就是比较基础的debounce功能的实现，同学们都听懂了吧？

马牛羊同学：“听懂了。”

歪老师：“好，下面我们来逐步拓展。马同学，在这个基础上让你去实现首次触发时立即执行一次函数，你会怎么实现？”

马同学：“老师，什么场景下才需要在首次就执行呢？”

歪老师：“

防抖c语言,花式解说防抖函数debounce的实现相关推荐

java接口防抖_花式解说防抖函数debounce的实现
歪式絮叨:原本打算只用一篇文章总结下防抖和节流的,但是写着写着发现挺有意思的.所以准备会分成 3-4 篇来写了,单独的防抖和节流的实现,然后在去分享一下知名库的源码.今天先跟歪马一起看看防抖的实现吧. ...
防抖函数Debounce实现
实现原理就是利用定时器,函数第一次执行时设定一个定时器,之后调用时发现已经设定过定时器就清空之前的定时器,并重新设定一个新的定时器,如果存在没有被清空的定时器,当定时器计时结束后触发函数执行. 手写一 ...
debounce实现 js_javascript防抖函数debounce详解
定义及解读防抖函数 debounce 指的是某个函数在某段时间内,无论触发了多少次回调,都只执行最后一次.假如我们设置了一个等待时间 3 秒的函数,在这 3 秒内如果遇到函数调用请求就重新计时 3 ...
R语言使用download.file函数下载网络文件到本地（Download File from the Internet）
R语言使用download.file函数下载网络文件到本地(Download File from the Internet) 目录 R语言使用download.file函数下载网络文件到本地(Down ...
R语言stringr包str_dup函数字符串多次复制实战
R语言stringr包str_dup函数字符串多次复制实战目录 R语言stringr包str_dup函数字符串多次复制实战 #导入stringr包 #仿真数据
R语言stringr包str_count函数计算字符串匹配个数实战
R语言stringr包str_count函数计算字符串匹配个数实战目录 R语言stringr包str_count函数计算字符串匹配个数实战 #导入stringr包 #仿真数据
R语言使用R原生函数plot和lines可视化线图、并使用lty参数自定义线条类型、lwd自定义设置线条的粗细、col参数自定义线条颜色(Change R base plot line types)
R语言使用R原生函数plot和lines可视化线图.并使用lty参数自定义线条类型.lwd自定义设置线条的粗细.col参数自定义线条颜色(Change R base plot line types) ...
R语言ggpubr包ggsummarystats函数可视化分组条形图(自定义分组颜色、添加抖动数据点jitter、误差条)并在X轴标签下方添加分组对应的统计值（样本数N、中位数、四分位数的间距iqr)
R语言ggpubr包ggsummarystats函数可视化分组条形图(自定义分组颜色.添加抖动数据点jitter.误差条error bar)并在X轴标签下方添加分组对应的统计值(样本数N.中位数med ...
R语言使用t.test函数计算两组独立数据的t检验（Independent t-test）
R语言使用t.test函数计算两组独立数据的t检验(Independent t-test) 目录 R语言使用t.test函数计算两组独立数据的t检验(Independent t-test) #仿真数据

防抖c语言,花式解说防抖函数debounce的实现

防抖c语言,花式解说防抖函数debounce的实现相关推荐

最新文章

热门文章