浅谈js防抖和节流
防抖和节流是处理高频触发最常见的优化方式,对性能提升有很大的帮助。
防抖:将多次的高频操作优化为只在最后一次执行,应用场景如:输入框,只需在最后一次输入进行校验即可。
节流:保证每隔一段时间只执行一次,降低触发的频率,将高频操作优化成低频操作。应用场景如:添加表单、滚动条事件、resize事件等高频监听事件。
防抖的代码: <input placeholder="请输入手机号" /> <script> // 获取input对象 let inp = document.querySelector('input'); // 监听input值的变化 inp.addEventListener('input', antiShake(animal, 2000)) // 封装防抖方法 function antiShake(fn, wait){ // fn:执行的函数,wait:设置的时间 let timeSet = null; return args => { if(timeSet) clearTimeout(timeSet) timeSet = setTimeout(fn, wait); } } function animal(){ console.log("一条小狗"); } </script>
<style> .box { width: 200px; height: 200px; background-color: greenyellow; } </style> // 鼠标按住移动触发事件 <div class="box"></div> let box = document.querySelector('.box'); box.addEventListener("touchmove", throttle(run, 2000)) function throttle(fn, wait) { let timer = null; return args => { if(!timer) { timer = setTimeout(() => { fn(); // 将timer释放 timer = null; }, wait) } } } function run () { console.log("它在跑") }
区别:
防抖:在固定的时间内,时间只允许发生一次
节流:在一定的时间内,多个操作合并为一个,就比如:将水龙头的水流放小了一样
热门相关:骑士归来 霸皇纪 时间都知道(唐嫣、窦骁、杨烁主演) 妈妈的朋友3 刺客之王