js实现防抖和节流

最新推荐文章于 2024-02-23 07:44:32 发布

前端.攻城狮

最新推荐文章于 2024-02-23 07:44:32 发布

阅读量241

点赞数

分类专栏： JavaScript 文章标签：防抖节流 JavaScript

本文链接：https://blog.csdn.net/weixin_45304198/article/details/100623417

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一，防抖

防抖是指触发事件后在n秒内函数只能执行一次，如果在n秒内又触发了同一个事件，则重新计算函数执行时间。
防抖的原理就是： 要等你触发完事件 n 秒内不再触发事件，我才执行。

优点： 防止同一时间多次下发接口，出现卡顿假死现象，有效减少了性能的损耗

防抖应用最多的就是 实时搜索

在<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
  <div id="demo">
      <input id="inp" type="text" value="">
  </div>

  <script>
      function success() {
          var val = document.getElementById("inp").value;
          console.log("搜索框中的值为" + val);
      }

      //防抖函数
      const debounce = (fn, delay) => {
          let timer = null;
          return (...args) => {
              clearTimeout(timer)
              timer = setTimeout(() => {
                  //绑定this,arguments的作用域，防止被外界修改，是fn的this就是fn的this
                  fn.apply(this,args)
              },delay)
          }
      }

      var app = document.getElementById("inp");
      app.addEventListener('input', debounce(success, 1000));
  </script>
</body>
</html>

假如我要在搜索框对 123 进行过滤
没防抖的效果：
在这里插入图片描述
加入防抖函数以后：

二、节流

当持续触发事件时，保证在一定时间内只调用一次事件处理函数，意思就是说，假设一个用户一直触发这个函数，且每次触发小于既定值，函数节流会每隔这个时间调用一次

function throttle(fn, delay){
	//记录上一次函数触发时间
	var lastTime = 0;
	return function(){
		//记录当前函数触发的时间
		var nowTime = Date.now();
		if(nowTime-lastTime > delay){
			//修正this的指向
			fn.call(this);
			lastTime = nowTime;
		}
	}
}

app.addEventListener('input', throttle(success, 1000));

防抖和节流的区别： 防抖是将多次执行变为最后一次执行，节流是将多次执行变为每隔一段时间执行

前端.攻城狮

关注

0
点赞
踩
0

收藏

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

一，防抖防抖是指触发事件后在n秒内函数只能执行一次，如果在n秒内又触发了同一个事件，则重新计算函数执行时间。防抖的原理就是：要等你触发完事件 n 秒内不再触发事件，我才执行。优点：防止同一时间多次下发接口，出现卡顿假死现象，有效减少了性能的损耗防抖应用最多的就是实时搜索在<!DOCTYPE html><html><head lang="en"&gt...
复制链接

扫一扫