您的位置: 首页  >  IT文章  >  浅谈js的防抖和节流

浅谈js的防抖和节流

分类: IT文章 • 2025-01-28 17:25:22

如果一个事件触发的频率无限制，会加重浏览器的负担，导致用户体验非常糟糕。此时我们可以采用debounce（防抖）和throttle（节流）的方式来减少触发的频率，同时又不影响实际效果。
比如说搜索框的请求优化，搜索的这个需求基本上随处可见，几乎每个项目都会有搜索。
输入搜索词条需要立即触发搜索请求时，防抖和节流可以将多个请求合并为一个请求

现在利用一小例子简单理解一下防抖和节流

首先需要一个盒子
  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
          .box {font-size:100px;100%;height:400px;border:4px solid #f00;display:flex;justify-content:center;align-items:center;}

      </style>
  </head>
  <body>
      <div class="box"></div>
  </body>
简单写一个绑定鼠标事件 当鼠标移动时让num++
  var num=0;
  var box=document.querySelector('.box');

  //DOM0级事件绑定--pc端
  //box.onmousemove=debounce(move,2000)

  //DOM2级事件绑定
  box.addEventListener('mousemove',debounce(move,2000),false)

  function move(e) {
      num++;
      this.innerHTML=num;

  }
防抖

简单来说就是防止抖动
当持续触发事件时，debounce 会合并事件且不会去触发事件，当一定时间内没有触发再这个事件时，才真正去触发事件。
防抖主要利用定时器实现

  //用定时器实现防抖
  function debounce(func,wait) {
      var timer=null;
      return function() {
      //保存当前调用的dom对象
       var _this=this;
       //保存事件对象
       var args=arguments;
       clearTimeout(timer)
       timer=setTimeout(function() {
           func.apply(_this,args)
       },wait)
      }      
  }
节流

hrottle（节流），当持续触发事件时，保证隔间时间触发一次事件。
持续触发事件时，throttle 会合并一定时间内的事件，并在该时间结束时真正去触发一次事件。
防抖主要有两种方式实现

第一种：时间戳

//时间戳版本实现节流
function throttle(func,wait) {
    //定义初始时间
    var oldTime=0;
    return function() {
        var _this=this;
        var args=arguments;

        //当前时间戳
        var newTime=+new Date();

        //判断用当前时间减去旧的时间，如果大于wait指定的时间就会触发
        if(newTime-oldTime>wait) {
            //执行触发的函数
            func.apply(_this,args)
            //将旧时间更新
            oldTime=newTime;
        }

    }

第二种：定时器

//时间戳版本实现节流
function throttle(func,wait) {
    var timer=null;
    return function() {
        var _this=this;
        var args=arguments;
       if(!timer) {
            timer=setTimeout(function() {
                timer=null;
                func.apply(_this,args)
            },wait)
       }
    }
}

相关推荐