节流防抖

最新推荐文章于 2024-06-10 22:52:06 发布

「已注销」

最新推荐文章于 2024-06-10 22:52:06 发布

阅读量60

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_53915541/article/details/115358030

版权

防抖(debounce)

那么可以在第一次触发事件时，不立即执行函数，而是给出一个期限值比如200ms，然后：
如果在200ms内没有再次触发滚动事件，那么就执行函数
如果在200ms内再次触发滚动事件，那么当前的计时取消，重新开始计时
效果：如果短时间内大量触发同一事件，只会执行一次函数。

代码

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
   <button id='btn'>按钮</button>
</body>
<script type="text/javascript">
   function debounce(fn, delay) {
       // 记录上一次的延时器
       var timer = null;
       return function() {
           // 清除上一次延时器
           clearTimeout(timer)
           timer = setTimeout(function() {
               fn.apply(this)
           }, delay)
       }
   }
   document.getElementById('btn').onclick = debounce(function() {
       console.log('点击事件被触发' + Date.now())
   }, 1000)
   </script>
</html>

节流函数

可以设计一种类似控制阀门一样定期开放的函数，也就是让函数执行一次后，**在某个时间段内暂时失效，**过了这段时间后再重新激活（类似于技能冷却时间）。

<html>
	<head>
		<title>节流实现搜索</title>
		<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
	</head>
	<body>
		<input type="text" class="search" placeholder="搜索...">
		<script type="text/javascript">
			$("body").on("keyup", ".search", function() {
				searchFunc(2000);
			})
			var lastTime = null,
				nowTime = null;
			var searchFunc = function(gapTime) {
				nowTime = new Date().getTime();
				if (nowTime - lastTime > gapTime || !lastTime) {
					console.log('请求接口返回搜索内容。。。');
					lastTime = nowTime;
				}
			}
		</script>
	</body>
</html>

「已注销」

关注

0
点赞
踩
0

收藏

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

防抖(debounce)那么可以在第一次触发事件时，不立即执行函数，而是给出一个期限值比如200ms，然后：如果在200ms内没有再次触发滚动事件，那么就执行函数如果在200ms内再次触发滚动事件，那么当前的计时取消，重新开始计时效果：如果短时间内大量触发同一事件，只会执行一次函数。节流函数可以设计一种类似控制阀门一样定期开放的函数，也就是让函数执行一次后，**在某个时间段内暂时失效，**过了这段时间后再重新激活（类似于技能冷却时间）。...
复制链接

扫一扫