河北省电力建设第二工程公司网站,wordpress做复杂网站,关于前端开发培训机构,wordpress 搜索的过程防抖
防抖是什么#xff1f; 单位时间内#xff0c;频繁触发事件#xff0c;只执行最后一次 通俗易懂点就是把防抖想象成MOBA游戏的回城#xff0c;在回城过程中被打断就要重来 例子#xff1a;我们来做一个效果#xff0c;我们鼠标在盒子上移动#xff0c;数字就变化 …防抖
防抖是什么 单位时间内频繁触发事件只执行最后一次 通俗易懂点就是把防抖想象成MOBA游戏的回城在回城过程中被打断就要重来 例子我们来做一个效果我们鼠标在盒子上移动数字就变化 1 基础样式代码
!DOCTYPE html
html langen
headmeta charsetUTF-8title/titlestyle.box {width: 200px;height: 200px;background-color: red;margin: 100px auto;text-align: center;line-height: 200px;font-size: 30px;}/style
/head
bodydiv classbox/div
/body
/html接下来我们来实现这个效果 没防抖时 // 获取盒子const box document.querySelector(.box)// 定义一个num控制数字let i 0// 设置鼠标移动事件box.onmousemove function() {// 移动就1box.innerHTML i}如图所示我们鼠标移动数字不停的1 我们使用防抖的方式写这里介绍2种方式
第一种 先执行 // 获取盒子const box document.querySelector(.box)// 控制数字var num 1// 存一个延迟器 关键 let timer //undefined// setInterval(() {// console.log(typeof timer) //大家可以实验一下可以更了解原理// }, 1000)box.onmousemove function () {let obj timer //第一次是undefined// 移动就清除定时器clearTimeout(timer)// 当鼠标不在移动时执行延迟器 1s后执行timer setTimeout(() {// 给timer传一个空 空就赋值给了全局作用域种的timer// 只有当鼠标移动时 全局作用域timer赋值给了objtimer null}, 1000)// 一移入就判断// 第一次obj是undefined 所以一移入就 1// 第二次我鼠标停止不动 timernull 就赋值给了全局的timer// 只有移动才触发全局的timer赋值给 obj 所以 1if (!obj) {// numbox.innerHTML num}}第二种 后执行 // 获取盒子const box document.querySelector(.box)// 控制数字var num 1// 存一个延迟器let timer box.onmousemove function () {// 鼠标移动就清除延迟器clearTimeout(timer)// 鼠标停止时 1s 1 // 继续移动停止 1s 1// 只有移动了才会触发timer setTimeout(() {box.innerHTML num}, 1000)}节流
节流是什么 节流是单位时间内频繁触发事件只执行一次 通俗易懂点就是把防抖想象成MOBA游戏中角色的技能在技能冷却时间内技能无法释放只有冷却结束才可以继续释放 使用场景 高频事件 鼠标移动 mousemove、页面尺寸缩放 resize 、滚动条滚动 scroll 等等 例子与上面防抖例子一样 样式也一样 我们来使用节流处理数字 介绍二种写法
第一种 延迟器 // 获取盒子const box document.querySelector(.box)// 控制数字let num 1// 存延迟器let timer// 绑定鼠标移动事件box.onmousemove function () {// 移动就判断 不移动就一直不进入判断// 第一次移动timer 为undefined // 第一次为undefined !undefined为true 执行if (!timer) {timer setTimeout(() {// 1s之后 null赋值给timer 现在全局里的timer为nulltimer null// 1s后 numbox.innerHTML num}, 1000)}}第二种 时间戳 // 获取盒子const box document.querySelector(.box)// 控制数字let num 1// 控制时间var timeNew 0;// 绑定鼠标移动事件box.onmousemove function () {// 获取时间戳let timeOld Date.now()// 判断如果老时间戳 - 新时间戳 大于了 1000 就执行if (timeOld - timeNew 1000) {// 大于了就把老时间戳赋值给新时间戳// 这样就可以控制住时间timeNew timeOld// 大于就box.innerHTML num}}感谢大家的阅读本人文笔有限如有不对的地方可以向我提出感谢大家
