vue实现防抖,vue使用防抖函数

  vue实现防抖,vue使用防抖函数

  防抖和节流是开发过程中常用的性能优化方式,可以减少不必要的计算,不浪费资源,只在适当的时候触发计算。本文主要介绍vue中使用防抖和节流的相关信息,有需要的朋友可以参考一下。

  

目录

  前言概念使用场景代码的防抖定义使用节流定义使用场景代码使用vue中的摘要

  

前言

  在一个电影项目中,我想保存下拉在电影列表中的当前位置,以免你切换页面后再切换回当前电影列表页面,他会返回到电影的第一个数据。

  这时候我不想每滑一点就保存当前位置。偶尔也想挽回一下。这个时候我可以用防抖和节流。

  

概念

  说白了,防抖节流就是用定时器来达到我们的目的。

  防抖(debounce):

  事件触发n秒后,将执行回调。如果在n秒内再次触发,计时器将重新计时。

  一个典型的案例是输入框搜索:输入结束后n秒发出搜索请求,n秒内输入的内容再次计时。

  节流(throttle):

  规定一个功能在单位时间内只能触发一次。如果一个功能在这个单位时间内被多次触发,那么只有一个功能会生效。

  典型的情况是鼠标连续点击触发,规定N秒内多次点击只生效一次。

  

防抖

  

定义

  频繁操作以防止抖动。如果你在操作后N秒内没有操作,事件就会被触发。如果继续操作,会再次计时。

  

使用场景

  输入接线盒

  缩放调整大小

  

代码

  //utils.js

  immediate是否立即开始执行?

  函数去抖(func,delay=300,immediate=false) {

  让定时器=空

  返回函数(){

  if(计时器){

  清除超时(定时器)

  }

  如果(立即!计时器){

  func.apply(这,参数)

  }

  timer=setTimeout(()={

  func.apply(这,参数)

  },延迟)

  }

  }

  

在vue中使用

  方法1:在公共方法utils中编写并介绍它。

  从“实用程序”导入{去抖}

  方法:{

  app search:de bounce(function(e . target . value){

  this.handleSearch(值)

  }, 1000),

  handleSearch(值){

  console.log(值)

  }

  }

  方法2:将其写入当前vue文件

  数据:()={

  返回{

  去抖输入:()={}

  }

  },

  方法:{

  showApp(值){

  console.log(值,值)

  },

  去抖(func,delay=300,immediate=false) {

  让定时器=空

  返回函数(){

  if(计时器){

  清除超时(定时器)

  }

  如果(立即!计时器){

  func.apply(这,参数)

  }

  timer=setTimeout(()={

  func.apply(这,参数)

  },延迟)

  }

  }

  },

  已安装(){

  this . de bounce input=this . de bounce(this . show app,1000)

  },

  

节流

  

定义

  稀释功能频繁执行,频繁操作时每N秒触发一次。

  

使用场景

  每单位时间只单击鼠标一次。

  滚动事件、延迟加载、滚动加载、加载更多或监听滚动条位置

  防止高频点击提交,防止表单重复提交。

  

代码

  //utils.js

  功能节流(func,delay=300) {

  让prev=0

  返回函数(){

  let now=Date.now()

  if((当前-先前)=延迟){

  func.apply(这,参数)

  prev=Date.now()

  }

  }

  }

  

在vue中使用

  使用与防抖相同的方法

  

总结

  关于vue中防抖和节流的使用,这篇文章就到这里了。关于vue中防抖和节流使用的更多信息,请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们!

郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

留言与评论(共有 条评论)
   
验证码: