前端函数防抖(debounce)和函数节流(throttle)
什么是防抖和节流:
比如搜索框，用户在输入的时候使用change事件去调用搜索，如果用户每一次输入都去搜索的话，那得消耗多大的服务器资源，即使你的服务器资源很强大，也不带这么玩的。
【前端函数防抖(debounce)和函数节流(throttle)】区别
函数节流不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数，而函数防抖只是在最后一次事件后才触发一次函数。函数防抖将几次操作合并为一此操作进行。原理是维护一个计时器，规定在delay时间后触发函数，但是在delay时间内再次触发的话，就会取消之前的计时器而重新设置。这样一来，只有最后一次操作能被触发。函数节流使得一定时间内只触发一次函数。原理是通过判断是否到达一定时间来触发函数。
函数防抖
定义: 函数防抖就是在一段时间触发或调用函数时,只执行一次;
也可以理解为触发n毫秒之后才会调用一次
优点: 优化系统性能
例如每次用户停止输入后，延迟超过500ms时，才去搜索此时的String，这就是防抖。
如果用手指一直按住一个弹簧，它将不会弹起直到你松手为止。
也就是说当调用动作n毫秒后，才会执行该动作，若在这n毫秒内又调用此动作则将重新计算执行时间。
原理：将若干个函数调用合成为一次，并在给定时间过去之后仅被调用一次。
应用场景：实时搜索（keyup）、拖拽（mousemove）
文章图片
演示效果
文章图片
代码片段 封装防抖函数
完整demo
文章图片
还有一种方法只不过获取不到this 直接上代码 不发截图了
function debounce(fn,wait){
var timer = null;
return function(){
if(timer !== null){
clearTimeout(timer);
}
timer = setTimeout(fn,wait);
}
}
function handle(){
console.log('你好');
}
input.oninput=debounce(handle, 1000)
函数节流
函数节流就是预定一个函数只有在大于等于执行周期时才执行，周期内调用不执行。好像水滴攒到一定重量才会落下。
指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率。
应用场景：窗口调整(resize)、页面滚动(scroll)、抢购疯狂点击(mousedowm)
时间戳版本
文章图片
窗口大小改变时1秒执行一次 定时器版本
文章图片
区别：
时间戳版的函数触发是在时间段内开始的时候，而定时器版的函数触发是在时间段内结束的时候。
推荐阅读
- 一起来学习C语言的字符串转换函数
- C语言字符函数中的isalnum()和iscntrl()你都知道吗
- C语言浮点函数中的modf和fmod详解
- C语言中的时间函数clock()和time()你都了解吗
- 概率论/统计学|随机变量 的 分布函数 与 概率密度函数 的区别
- Jsr303做前端数据校验
- 7、前端--jQuery简介、基本选择器、基本筛选器、属性选择器、表单选择器、筛选器方法、节点操作、绑定事件
- 前端代码|前端代码 返回顶部 backToTop
- vue组件中为何data必须是一个函数（）
- iOS-Swift-map|iOS-Swift-map filter reduce、函数式编程