|
防抖经典应用常见: 手风琴效果
引入没有做防抖的网站: 
做了防抖的网站: 
防抖场景1(鼠标移入)抖动 ： 用户本来不想触发这个交互，但是由于鼠标不小心抖动误触发交互事件。
例子： 想看第五张图片，。不想看2 3 4张。 但是鼠标从第1张滑到第五张时候，不小心放在了2 3 4上面。误触发。 函数防抖 ： 用户连续多次触发某个事件，则只执行最后一次。 解决原理: 开启定时器，间隔时间内如果多次触发事件，则每一次都清除上一次定时器。 实例及解决代码: <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <title>动画-案例《手风琴》</title> <style> * { margin: 0; padding: 0; } ul { list-style: none; width: 2400px; } #box { width: 1200px; height: 400px; border: 1px solid red; margin: 100px auto; overflow: hidden; } #box li { width: 100px; height: 400px; float: left; transition: all 0.5s ease-out; } #box li.over { width: 800px; } </style> </head> <body> <div id="box"> <ul> <li v-for="(item,index) in list" :class="{over:overIndex == index}" @mouseenter="doEnter(index)"> <img :src="item" alt=""> </li> </ul> </div> <script src="./vue.js"></script> <script> let app = new Vue({ el:'#box', data:{ overIndex:0, list:[ './images/collapse/1.jpg', './images/collapse/2.jpg', './images/collapse/3.jpg', './images/collapse/4.jpg', './images/collapse/5.jpg', ], timeID:null }, methods: { doEnter(index){ /* 开启防抖 */ //1.1 先清除上一次定时器，以本次为准 clearTimeout(this.timeID) //1.2 开启定时器（防抖间隔） this.timeID = setTimeout(()=>{ this.overIndex = index; },500) } }, }) </script> </body></html>
防抖场景2(键盘按键)经典应用场景: 搜索联想词
-开发中, 该功能后端会使用中间件"OpenSearch"或者"Elasticsearch", 后端的逻辑处理会十分高效、快捷.
-此处只是基于前端的角度, 从减少http请求这个方面出发来进行优化 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title></head><body> <input type="text" placeholder="请输入搜索内容"> <script> let timeID = null; document.querySelector('input').oninput = function(){ /* 函数防抖 */ //(1)先清除以前的定时器 clearTimeout(timeID) //(2)开启防抖定时器 timeID = setTimeout(() => { console.log( this.value ); }, 500); } </script></body></html>
函数节流概念: 解决高频事件带来的性能问题;高频事件： 在页面中，有些事件触发频率非常的高。
例如: 鼠标移动，滚轮事件。 解决原理: 用户连续多次触发事件，指定时间内只会触发一次 实例及解决代码: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> body{ height: 3000px; } </style></head><body> <script> let lastTime = null; let i = 1; window.onmousemove = function(){ /* 函数节流 */ //(1)判断两次触发事件的时间间隔 let time = Date.now() if( time - lastTime >= 500 ){ console.log('鼠标移动次数：' + i++); //(2)本次触发时间作为下一次参考间隔 lastTime = time } } // let j = 1; // window.onscroll = function(){ // //(1)判断两次触发事件的时间间隔 // let time = Date.now() // if( time - lastTime >= 500 ){ // console.log('鼠标滚动次数：' + j++); // //(2)本次触发时间作为下一次参考间隔 // lastTime = time // } // } </script></body></html>以上就是web项目开发之JS函数防抖与节流示例代码的详细内容，更多关于web项目JS函数防抖与节流的资料请关注51zixue.net其它相关文章！
下载地址:
Vue中如何定义数据示例详解
web面试之JS预解析与变量提升区别 |
