高频面试题—“什么是防抖节流？”

最新推荐文章于 2023-06-03 17:01:47 发布

小hu同学

最新推荐文章于 2023-06-03 17:01:47 发布

阅读量314

点赞数

分类专栏：前端面试文章标签： js 防抖节流

本文链接：https://blog.csdn.net/weixin_45054614/article/details/118531578

版权

前端面试专栏收录该内容

24 篇文章 1 订阅

订阅专栏

防抖：用户触发事件过于频繁，只要最后一次事件的操作
节流：控制高频的执行次数

什么是防抖？

防抖：用户触发时间过于频繁，只要最后一次事件的操作

案例：我在输入框中输入了 123 但是控制台打印出来的是 1 12 123

在这里插入图片描述
测试代码

<body>
    <input type="text">
    
    <script>
    <!--获取input标签 -->
        let ip = document.querySelector("input")
        
        <!--oninput输入就触发 -->
        ip.oninput = function() {
            console.log(this.value);
        }
    </script>
</body>

解决以上的频繁触发的操作


    //获取input标签 
        let ip = document.querySelector("input");
        //声明一个变量 给它赋值为null  空
        let nat = null;
       // oninput输入就触发

        ip.oninput = function() {
        //判断这个变量是否是为空的
        //不为空了就执行里面的事件函数
          if( nat !==null){
          clearTimeout(nat)
        }
        //利用定时器，输入间隔为0.5秒
       nat = setTimeout(() =>{
			console.log(this.value)
			},500)
}
思路：
如果这个ip.oninput事件被触发了，如果是最后一次就直接执行setTimout这个计时器的操作，如果不是最后一次，就执行clearTimout清除掉之前的

在这里插入图片描述

防抖代码的优化(封装)

刚刚虽然我们实现了防抖的功能，但是代码是比较难看的，需要在这个基础上，进行代码的优化。这里我们需要使用闭包去进行封装它

第一步：

//创建一个闭包 ab
function ab(){
//将之前的事件函数放在闭包 ab的内部函数里面
	function(){
        //判断这个变量是否是为空的
        //不为空了就执行里面的事件函数
          if( nat !==null){
          clearTimeout(nat)
        }
        //利用定时器，输入间隔为0.5秒
       nat = setTimeout(() =>{
			console.log(this.value)
			},500)
   }
}

第二步：

//获取input标签  赋值给变量 ip
       let ip = document.querySelector("input");
       
      ip.oninput = ab(function() {
      	//这个是业务逻辑，打印this.value
      	//这里的this 指向的是Windows
            console.log(this.value);
          //定时器
        },500)

第三步：

 let ip = document.querySelector("input");
  ip.oninput = ab(function() {
            console.log(this.value);
        },500)

 //利用闭包来封装函数
 //在这个函数中需要传递参数
 //fn :是真正的业务逻辑，在调用的时候要传递到上面的事件中
 //on :是计时器的时间
        function ab( fn,on) {
            let t = null;
    
    //要吧这个函数return出去
          return function() {
        //判断这个变量是否是为空的
        //不为空了就执行里面的事件函数
          if( t !==null){
          //清空这个事件函数
          clearTimeout(t)
        }
        //利用定时器，输入间隔为0.5秒
       t = setTimeout(() =>{
       	//上面我们说到了，在oninput的事件中this的指向是指向的Windows对象
       	//这个函数里面的this 是指向的input这个属性
       	//console.log(this) 可以实践一下
       	//当我们如果使用  fn()直接去调用的话，打印出来的会是undefined
       	//这个地方，就要使用call方法，去改变这个this的指向了
       	//call（this）:让当前fn指向当前的this
       	
			fn.call(this)
			},on)
           }    
        }

在这里插入图片描述
一样的，效果也能出现，在输入框输入后只会出现最后一个

什么是节流？

节流的意思：控制执行的次数

案例详情：
代码：

<style>
    body{
        height: 3000px;
    }
</style>
<body>
    <script>
      window.onscroll =function(){
        console.log(1);
    }
    </script>

在这里插入图片描述
滚动了短短的一定距离，就发送了100多次，这样会大大降低性能

需求：我们现在要减少执行的次数
代码：

let ab = true;
windows.onscroll = function(){
	if(ab){
		setTimeout(()=>{
			console.log(1)
			//所以这里需要将 ab 改为true
			ab =true;
		},500)
     }
     //将ab 改为false 就不执行这个函数了
     ab = false;
  }

节流代码的优化（封装）

节流的封装跟防抖的封装是差不多的



window.onscroll = throttle (function(){
	console.log(1)
},500)

function throttle (fn,delay){

 let ab = true;

return function(){
    if(ab){
		 setTimeout(()=>{
			
			fn.call(this)
			//所以这里需要将 ab 改为true
			ab =true;
		},delay)
     }
     //将ab 改为false 就不执行这个函数了
     ab = false;
	}
  }