首页 > 其他分享 >vue 防抖节流器

vue 防抖节流器

时间:2023-02-10 10:33:26浏览次数:37  
标签:防抖 vue throttle 节流 onresize true 变量 赋值

节流器:在一定时间内频繁的触发函数只会执行一次

应用场景:我这里有一个图表需要在窗口改变大小的时候重绘图表的大小,但是窗口改变大小的事件过于频繁,需要增加一个节流器来进行处理,最终需要实现图表的自适应。

methods:{
  onresize(){
    let throttle = true
    window.onresize = function(){ //节流防止函数触发频繁
      if (throttle) {
        throttle = false
        setTimeout(() => {
          console.log('触发');
          throttle = true
        }, 300);
      }else{
        return
      }
    }
  }
},
mounted(){
  this.onresize()
}

原理:

  1. 声明一个变量(throttle)并赋值为true
  2. window.onresize监听浏览器窗口大小的变化
  3. 判断变量(throttle)是否为true
  4. 进入之后将变量(throttle)赋值为false,防止同一时间再次进入
  5. 增加定时器setTimeout,把时间设置为300毫秒(具体时间按照场景可调整)
  6. 进入定时器之后在将变量(throttle)赋值为true,此时才可以再次进入
  7. 最后需要生命周期函数将该函数执行一次

标签:防抖,vue,throttle,节流,onresize,true,变量,赋值
From: https://blog.51cto.com/u_15928719/6048846

相关文章

  • vue3-使用百度地图遇到的坑-地图实例化
    1、创建地图实例    原因:在使用vue3为了只定义一次地图实例,在所有方法中使用,直接使用如下定义方式:setup(){constdata=reactive({bmap:null,})......
  • docker搭建vue+nginx部署
    Vue+nginx部署1.首先安装ningx镜像 2.将nginx关键目录映射到本机  首先在本机创建nginx的文件存储目录       www:nginx存储网站网页的目录......
  • vue3实现单页crud
    1.介绍主要实现单页curd,包含分页、新增、修改、删除、批量删除、条件搜索、表单校验。导入和导出暂未实现。、本文章只是学习过程。仅供参考。2.代码,按需复制修改即可......
  • Vue课程56-演示案例需求
     ......
  • Vue课程59-label的for属性
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="w......
  • Vue课程57-循环渲染表格行的数据
    代码部分<!DOCTYPEhtml><htmllang="en"> <head> <metacharset="UTF-8"/> <metahttp-equiv="X-UA-Compatible"content="IE=edge"/> <metaname="viewpor......
  • Vue课程49-时间绑定-按键修饰符
     <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content......
  • Vue课程50-了解v-model指令的用法
     <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content......
  • vue课程75 axios是只专注于网络请求的库
     <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"conte......
  • Vue课程40-在属性绑定和插值中编写
     <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content......