备案 新增网站,网站开发学历要求,军事最新消息,菏泽住房和城乡建设局网站目录 一、防抖
实现方式
二、节流
实现方式 一、防抖
所谓防抖#xff0c;单位时间内#xff0c;某个动作只能执行矗后一次#xff0c;可以用在搜索框业务中。 性能优化的手段
防抖 --- 在同一时间内 频繁触发事件,只处理最后一次
实现方式
1、用第三方库Lodash防抖的…目录 一、防抖
实现方式
二、节流
实现方式 一、防抖
所谓防抖单位时间内某个动作只能执行矗后一次可以用在搜索框业务中。 性能优化的手段
防抖 --- 在同一时间内 频繁触发事件,只处理最后一次
实现方式
1、用第三方库Lodash防抖的方法 document.querySelector(input).addEventListener(input,_.debounce(function () {console.log(输入)}, 400))
2、手写实现
思路 当事件发生不立即执行事件回调。给个500毫秒后执行事件回调(定时器在500毫秒内 再次触发事件,先取消上次的定时器再重新开启一个定时器 function debounce(fn, t) {let setIdreturn function () {clearTimeout(setId)setId setTimeout(function () {fn()}, t)}}
二、节流
所谓节流单位时间内某个动作只能执行一次可以用在鼠标移动、页面尺寸缩放resize、滚动条滚动等场景 性能优化的手段 节流 - 在同一时间内 频繁触发事件,只执行一次
实现方式
1、用第三方库Lodash节流的方法 document.querySelector(button).addEventListener(click,_.throttle(function () {console.log(发请求)}, 3000))2、手写实现
思路
当第一次事件发生把回调函数放到定时器 setTimeout(function () {回调调用},1000) 并且设置开关 把开关状态为true
当第二次事件发生 判断开关状态 false 可以处理当前回调 true返回 function throttle(fn, t) {let flag false // 一开始 false表示没有任务执行return function () {if (flag) returnflag truesetTimeout(function () {fn()flag false}, t)}}
