JavaScript 防抖节流

最新推荐文章于 2023-07-10 15:49:58 发布

BUG飞檐走壁

最新推荐文章于 2023-07-10 15:49:58 发布

阅读量138

点赞数

文章标签： vue.js html

本文链接：https://blog.csdn.net/weixin_47974251/article/details/130774203

版权

一、防抖

定义：指一定时间内，同一事件多次触发时，只执行最后一次。

看了定义很多新手同鞋可能还是一头雾水，防抖，到底防的是个啥？很好理解，其实就是防的事件的高频触发，不限时间，要是一直以高频率触发同一事件，那就会进入我们的防抖设置，怎么实现，看下面例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
	.btn{
	  width: 120px;
	  height: 40px;
	  border: 1px solid skyblue;
	  background: #f2f3f8;
	  border-radius: 3px;
	  margin: 50px 0 0 50px;
	  cursor: pointer;
	  transition: 300ms;
	  line-height: 40px;
	  text-align: center;
	}
	.btn:hover{
	  background: #ccc;
	  border-color: #fff;
	}
	.showNum{
	  width: 120px;
	  height: 40px;
	  border: 1px solid #000;
	  margin-left: 50px;
	  line-height: 40px;
	  text-align: center;
	  color: green;
	  font-size: 20px;
	}
	</style>
	<body>
		<p class="btn" >add</p>
		<p class="showNum" >0</p>
	</body>
</html>
<script>
let btn = document.getElementsByClassName('btn')[0]
let showNum = document.getElementsByClassName('showNum')[0]

let addNum = 0
let timer = ''
btn.addEventListener('click', function(e) {
  clearTimeout(timer)
  timer = setTimeout(() => {
    addNum++
    showNum.innerHTML = addNum
  }, 300) // 300ms内如果又点击了按钮，就会被认定为高频操作
})

</script>

这里就不截效果图了，可以直接复制上面的代码自己去运行亲自己试试

防抖一般常用场景：

1、搜索框搜索输入；

2、手机号、邮箱号等输入检测；

3、窗口大小的调整；

二、节流

定义：指在一定时间内，只能触发一次事件。

这里也许很多新手同鞋会搞混，这看起来都差不多嘛，其实不然啊，注意仔细看定义。那么我们还是以上面的代码修改下为例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
	.btn{
	  width: 120px;
	  height: 40px;
	  border: 1px solid skyblue;
	  background: #f2f3f8;
	  border-radius: 3px;
	  margin: 50px 0 0 50px;
	  cursor: pointer;
	  transition: 300ms;
	  line-height: 40px;
	  text-align: center;
	}
	.btn:hover{
	  background: #ccc;
	  border-color: #fff;
	}
	.showNum{
	  width: 120px;
	  height: 40px;
	  border: 1px solid #000;
	  margin-left: 50px;
	  line-height: 40px;
	  text-align: center;
	  color: green;
	  font-size: 20px;
	}
	</style>
	<body>
		<p class="btn" >add</p>
		<p class="showNum" >0</p>
	</body>
</html>
<script>
let btn = document.getElementsByClassName('btn')[0]
let showNum = document.getElementsByClassName('showNum')[0]

let addNum = 0
let isclick = false
let timer = ''
btn.addEventListener('click', function(e) {
	if (timer !== '') return
    timer = setTimeout(() => {
		addNum++
		showNum.innerHTML = addNum
		isclick = true
		timer = ''
    }, 2000) // 2秒内只允许触发一次事件
	isclick = false
})

</script>

同上，直接复制代码去运行试效果，当然，写法多样化，还要靠自己探索

节流一般常用场景：

1、阻止用户同一条件连击事件造成系统不必要的开支；

2、滚动条监听事件

BUG飞檐走壁

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 防抖节流

看了定义很多新手同鞋可能还是一头雾水，防抖，到底防的是个啥？很好理解，其实就是防的事件的高频触发，不限时间，要是一直以高频率触发同一事件，那就会进入我们的防抖设置，怎么实现，看下面例子。这里也许很多新手同鞋会搞混，这看起来都差不多嘛，其实不然啊，注意仔细看定义。定义：指一定时间内，同一事件多次触发时，只执行最后一次。1、阻止用户同一条件连击事件造成系统不必要的开支；这里就不截效果图了，可以直接复制上面的代码自己去运行亲自己试试。同上，直接复制代码去运行试效果，当然，写法多样化，还要靠自己探索。
复制链接

扫一扫