JavaScript中函数的防抖与节流详解
更新时间：2022年02月22日 15:53:29 作者：大聪明码农徐
这篇文章主要为大家详细介绍了JavaScript中函数的防抖与节流，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
一、函数的节流
1.1 定义
同时触发多次函数执行，执行的是相同内容，要求只执行第一次请求。
例如scroll事件，鼠标滚动一次触发多次函数执行，只需要执行一次。
1.2 解决方法
定义类似于开关的效果，定义一个变量储存默认值，触发执行之前先判断变量存储的数据，如果是原始数据赋值变量新数据，如果不是原始数据，执行return 终止之后程序的执行。
1.3 案例演示
这里我们先写一个窗口监听事件。
1.3 .1 代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
//设置高度让页面显示滚动条
height: 4000px;
}
</style>
</head>
<body>
<script>
// 创建窗口监听事件
window.addEventListener("scroll",function(){
fun();
})
// 随便写一个后台输出函数
function fun(){
console.log(666);
console.log(888);
}
</script>
</body>
</html>1.3 .2 运行结果
可以看到，博主只拨动了一次鼠标的滚轮，但是函数却执行了不止一次。
函数的节流就是要做到，滚动一次，执行一次函数，后台输出一次结果。
1.3 .3 添加函数节流操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
height: 4000px;
}
</style>
</head>
<body>
<script>
// 创建窗口监听事件
// 存储一个默认值为true
let flag = true ;
// 窗口监听事件
window.addEventListener("scroll",function(){
if( flag ){
flag = false ;
}else{
return ;
}
fun();
})
// 随便写一个后台输出函数
function fun(){
// document.write('已经到达1000px的上卷高度了')
console.log(666);
}
</script>
</body>
</html>1.3 .4 运行结果
二、函数的防抖
2.1 定义
同时触发多次函数执行，只执行最后一次请求，多次触发的函数程序结果是不同的。
2.2 解决方法
通过延时器延迟时间执行程序，先清除定时器，再触发定义的新的延时器执行函数程序。
2.3 案例演示
这里我们先写一个input输入数据事件。
2.3.1 代码展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text">
<script>
// 获取标签
const oIpt = document.querySelector('input');
// input输入事件监听
oIpt.addEventListener('input',function(){
console.log(`您输入了${oIpt.value.length}个字`);
})
</script>
</body>
</html>2.3.2 运行结果
这里我判断的是输入字符串的长度，可以看到输出结果由1-5个字，最后打出中文又变回了2个字符。那防抖的操作就是我只打出最后一个“你好”这串字符的长度。
也就是同时触发多次函数请求，只执行最后一次。
2.3.3 添加函数防抖操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text">
<script>
// 获取标签
const oIpt = document.querySelector('input');
// input输入事件监听
oIpt.addEventListener('input',function(){
// 先清除定时器
clearInterval( time );
// 定义延时器 延迟执行 函数程序
time = setTimeout( function(){
// 延时器 延迟一秒 执行程序
setPage() ;
} , 2000 );
})
function setPage(){
console.log(`您输入了${oIpt.value.length}个字`);
}
</script>
</body>
</html>2.3.4 运行结果
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容!
相关文章
这篇文章主要为大家详细介绍了前端天气插件tpwidget使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-06-06
这篇文章主要介绍了js实现单击图片放大图片的方法,涉及javascript操作图片的技巧与onclick事件的用法,需要的朋友可以参考下2015-02-02
JS window对象的top、parent、opener含义介绍
本文为大家介绍下JS window对象的top、parent、opener含义，不了解的朋友可以参考下，希望对大家有所帮助2013-12-12
这篇文章主要介绍了javascript中的this作用域详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-07-07
这篇文章主要介绍了JS实现模糊查询带下拉匹配效果,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-06-06
这篇文章主要介绍了JavaScript错误处理机制的相关资料，文中讲解非常细致，帮助大家更好的理解和学习JavaScript，感兴趣的朋友可以了解下2020-08-08
TypeScript中正确使用interface和type的方法实例
在ts中定义类型由两种方式:接口(interface)和类型别名(type alias),interface只能定义对象类型,下面这篇文章主要给大家介绍了关于TypeScript中正确使用interface和type的相关资料,需要的朋友可以参考下2021-09-09
这篇文章主要为大家详细介绍了JS实现随机抽取三人，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-11-11
本篇文章主要介绍了详解webpack介绍&安装&常用命令，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
本文主要介绍了JavaScript中创建对象的7种模式，具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
最新评论