防抖和节流
防抖:
定义:
用户操作页面时,距离最近一次触发事件的时间超过设定的时间间隔才会执行一次回调函数。
(在设定的时间间隔内重复触发多次事件,只会在设定的时间间隔之后执行一次回调函数)
【手写防抖和节流函数】应用场景:
1.input输入内容时。
精简版代码:
//debounce
function debounce(fn,delay=500){
let timer = null //timer是闭包中的
return function(){
if(timer) clearTimeout(timer)
timer = setTimeout(()=>{
fn.apply(this,arguments)
timer = null
},delay)
}
}
节流:
定义: 用户操作页面时,在持续触发事件的时间段内,每过一段设定的时间间隔,就会执行一次回调函数。
应用场景:
1.拉动滚动条时。
2.滑动验证码滑块时。
3.拖拽元素时。
精简版代码:
//throttle
function throttle(fn,delay=100){
let timer = null
return function(){
if(timer) return
timer = setTimeout(()=>{
fn.apply(this,arguments)
timer = null
},delay)
}
}
推荐阅读
- 数据库|服务器项目部署(一)
- javascript|一个超级简单的浮动Select
- 高级前端工程之路|《代码规范》如何写出干净的代码(二)函数与方法
- java|【2017中国开发者调查报告】你看那个人,好像一个程序员哦!
- Leetcode5最长回文子串(中心拓展法和动态规划法)
- JavaScript 引擎是如何实现 async/await 的
- 几种快速排序方法
- ES6新特性拾遗
- JavaScript的继承