防抖和节流

最新推荐文章于 2024-09-22 20:39:15 发布

滋滋俊

最新推荐文章于 2024-09-22 20:39:15 发布

阅读量434

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_48816102/article/details/126085474

版权

首先防抖和节流都是用来优化代码和提高性能的操作,简单说一下防抖和节流

防抖: 频繁触发事件,当一段时间内没有触发事件,就会执行相应的操作(如: 搜索框)

节流: 频繁触发事件,一定时间段内,只执行一次,可以理解为把高频触发的事假转化为低频触发

下面我们来看一下相应的代码:

防抖:

<body>
  <input type="text">

  <script>
    const input = document.querySelector('input')
    let timer = null
    input.oninput = function() {
      if(timer!==null) clearTimeout(timer)
      timer = setTimeout(()=>{
        console.log(this.value)
      },1000)
    }
</body>

注解: 首先声明一个变量(初始值给null)来控制定时器,当触发事件时,先清空上一次定时器,然后开启定时器,这样每次触发事件都会清空定时器和开启一个新定时器,如果没有触发事件了,就会执行定时器里面的代码,保证了最后一次触发事件才会执行.

优化代码:

上述代码还有待优化:

1. 可以使用闭包减少全局变量的使用

2.我们需要把防抖的逻辑代码和真正的业务逻辑代码分开来写,这样结构清晰,容易理解

代码如下:

 input.oninput = debounce(handle,500)
      function handle() {    //真正的业务
        console.log(this.value)
      }

     function debounce(fn,wait) {
        let timer = null
        return function() {  //防抖的业务
          if(timer!==null){
            clearTimeout(timer)
          } 
        timer = setTimeout(()=>{
          fn.call(this) //改变this指向,使他指向input
        },1000)
       }
      }

节流:

<body>
  <button>节流</button>
  <script>
    const button = document.querySelector('button')
    let bool = true
    button.addEventListener('click', function() {
      // console.log(Date.now())
      if(bool) {
        setTimeout(()=>{
          console.log(Date.now())
          bool = true
        },1000)
      }
      bool = false
    })
</body>

注解: 定义变量,判断如果为true,开启定时器. 之后把布尔值改为false如果只是做到这一步,那么不管怎么点击他最终只执行一次,所以要在定时器里面加一行把布尔值改为true的代码. 这样的话频繁触发事件,就会降低执行的频率了

第二种节流的方法:

   let prve = null  //上一次时间
    button.onclick = function() {
      let now = Date.now()  //当前时间
      // console.log('now',now)
      // console.log('prve', prve)
      if(now-prve >= 500) {
        console.log('hello world')
        prve = Date.now()
      }
    }

注解:每次触发事件都会记录时间戳,执行代码时也记录一个时间戳,通过判断当前时间戳和上一次执行的时间戳的差值是否大于规定时间,如果大于则执行相应代码,如果不大于,不执行,这样也可以起到一个节流的作用

节流优化: 和防抖差不多,也是将业务逻辑和节流逻辑分开写,这里就不过多介绍了