防抖
经典应用常见: 手风琴效果
引入
没有做防抖的网站:
做了防抖的网站:
防抖场景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函数防抖与节流的资料请关注Devmax其它相关文章！