洛阳瀍河建设局网站,wordpress修改地址后,成都网站优化及推广,江门网站制作培训Hi,有的小伙伴们在面试的时候会被要求手写节流函数#xff0c;很多都被难着了吧#xff0c;宝贝#xff0c;那你你没有理解节流函数。 今天#xff0c;就让我带你攻克它#xff01; 1.节流
单位时间内#xff0c;事件触发#xff0c;最多只执行一次事件回调。
人话:说… Hi,有的小伙伴们在面试的时候会被要求手写节流函数很多都被难着了吧宝贝那你你没有理解节流函数。 今天就让我带你攻克它 1.节流
单位时间内事件触发最多只执行一次事件回调。
人话:说白了节流就是技能CD只有CD结束后才能继续释放技能。
2.节流案例
节流案例: 鼠标在盒子上移动不管移动多少次都是200ms后才进行1操作。 3.使用
3.1 手写节流
核心思路利用setTimeout来进行实现。
1.声明一个定时器变量。
2.当鼠标每次滑动都先判断是否有定时器了如果有则不开启新的定时器。
3.如果没有定时器则开启定时器记得存到变量里面
--定时器里面执行事件回调
--定时器里面要把定时器清空 !DOCTYPE html
html langenheadmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/titlestyle.box {width: 500px;height: 500px;background-color: #ccc;color: #fff;text-align: center;font-size: 100px;}/style
/head
//引入lodash库script src./lodash.js/scriptbodydiv classbox/divscriptconst box document.querySelector(.box)let i 1 // 让这个变量// 鼠标移动函数function moveFn() {box.innerHTML i// 如果里面存在大量操作 dom 的情况可能会卡顿}//手写的节流函数function throttle(fn,time){let timernull;return function(){//先判断有没有定时器if(!timer){timersetTimeout(function(){fn();//执行事件的回调函数timernull;//清空定时器(此处为什么用null清空见下方解释。PS:定时器内部清空定时器)},time)}}}//使用lodash的节流函数box.addEventListener(mousemove, throttle(moveFn, 200));//在200ms内最多只执行一次1事件回调。/script
/body/html
注意:
定时器内部清空定时器的方法
//定时器内部清空定时器
//1.我们之前经常使用clearTimeout来进行定时器的清空但是有个前提我们都是在定时器外部来进行清空的如果在定时器内部进行清空是不会起作用的。
let timersetTimeout((){clearTimeout(timer);//这里清除不起作用程序还是会输出111console.log(111);
},200)//2.所以我们在定时器内部清空掉定时器会使用timernull的方式。
3.2 使用lodash库
1.安装lodash.js
cnpm i lodash --save 2.引入lodash
import _ from lodash 3.使用(vue3中)
div mousemovemoveFn/divlet moveFn_.debounce((){console.log(事件触发200ms后会打印);
},200) 4.节流的使用场景
1.高频触发事件:mouseMove。
2.页面尺寸缩放resize。
3.页面滚动条滚动:scroll。 抓紧时间练起来吧兄dei再不练你就废啦
记得支持我哦么么哒祝您好事成双~~~~~~
