网站qq代码,wordpress 插件商城,电子书网站搭建教程,推荐wordpress安装方式防抖和节流#xff0c;本质上是优化高频率执行代码的一种手段#xff0c;比如#xff1a;resize、scroll、keypress、mousemove这些事件在触发的时候#xff0c;会不断调用绑定在事件上的回调函数#xff0c;这样极大浪费资源#xff0c;降低前端性能。
为了优化体验本质上是优化高频率执行代码的一种手段比如resize、scroll、keypress、mousemove这些事件在触发的时候会不断调用绑定在事件上的回调函数这样极大浪费资源降低前端性能。
为了优化体验需要对这类事件进行调用次数的限制所以我们采取了防抖和节流的手段来减少调用频率。
节流在n秒内重复发生的事件只有一次是生效的 防抖在n秒后再执行该事件。
节流
完成节流可以使用时间戳与定时器的写法使用时间戳的写法事件会立即执行停止触发后没有办法再次执行
function throttled1(fn, delay 500) {let oldtime Date.now()return function (...args) {let newtime Date.now()if (newtime - oldtime delay) {fn.apply(null, args)oldtime Date.now()}}
}使用定时器的写法delay毫秒后第一次执行
function throttled2(fn, delay 500) {let timer nullreturn function (...args) {if (!timer) {timer setTimeout(() {fn.apply(this, args)timer null}, delay);}}
}两种写法的结合后
function throttled(fn, delay) {let timer nulllet starttime Date.now()return function () {let curTime Date.now() // let remaining delay - (curTime - starttime) // let context thislet args argumentsclearTimeout(timer)if (remaining 0) {fn.apply(context, args)starttime Date.now()} else {timer setTimeout(fn, remaining);}}
}防抖
简单的封装
function debounce(func, wait) {let timeout;return function () {let context this; // thislet args arguments; // eventclearTimeout(timeout)timeout setTimeout(function () {func.apply(context, args)}, wait);}
}防抖和节流的相同点
都可以使用setTimeout实现目的都是降低回调函数的执行频率节省计算资源
不同的是
函数防抖在连续操作结束后处理回调利用clearTimeout和setTimeout实现函数节流是在一段时间只执行一次防抖关注的是一段时间内频繁触发的事件只在最后执行一次节流值关注的事一段时间内执行一次。
应用场景
防抖的使用场景有
搜索框输入只需要用户最后一次输入完再做处理手机号、邮箱验证输入检测窗口大小resize只需窗口调整完成后计算窗口的大小防止重复渲染
节流的应用场景有
滚动加载加载更多或者滚动到底部监听搜索框搜索关联功能
