Vue自定义指令封装节流函数的方法示例

2024-10-16 20:15:07

节流函数是web前端开发中经常用到的一个开发技巧,在input实时搜索,滚动事件等,为了避免过多消耗性能,我们都会使用节流函数.在《JavaScript高级程序设计》一书中有这样的一个例子:

function throttle (method, context) {
  clearTimeout((method.tId))
  method.tId = setTimeout(function () {
   method.call(context)
  }, 100)
 }

 function resizeDiv () {
  var div = document.getElementById('myDiv')
  div.style.height = div.offsetWidth + 'px'
 }

 window.onresize = function () {
  throttle(resizeDiv)
 }

这个就是很典型的函数节流的应用,不多解释,本文通过vue的自定义指令封装类似的方法.

 <template>
 <div>
  <input
   type="text"
   v-model="text"
   v-debounce="search"
  >
 </div>
</template>
<script>
 export default {
  name: 'debounce',
  data () {
   return {
    msg: 'Welcome to Your Vue.js App',
    text: '',
    count: 1
   }
  },
  directives: {
   debounce: {
    inserted: function (el, binding) {
     let timer
     el.addEventListener('keyup', () => {
      if (timer) {
       clearTimeout(timer)
      }
      timer = setTimeout(() => {
       binding.value()
      }, 300)
     })
    }
   }
  },
  methods: {
   search () {
   // 实际要进行的操作 axios.get('')之类的
    this.count++
    console.log('count is:' + this.count)
   }
  }
 }
</script>

以上代码实现了一个实时搜索类的函数节流,通过vue自定义指令v-debounce实现.原本,如果我们想做一个实施搜索,那么会直接用@keyup=search,这样就会非常耗性能,键盘敲一下,就会调用一次search事件,如果是ajax请求,那么会非常不友好,所以通过v-debounce,则可以在键盘连续敲击的时候组织运行,停留300毫秒才执行.

通过vue的自定义指令,还可以将其挂载在全局,那样就能全局通过v-debounce调用了.这个比传统方法简单很多,不需要call,apply之类的.

关键点:vue 的自定义指令传递的参数binding 如果是一个函数,则通过binding.value()来执行,通过上述示例,还可以传递比如事件, 绑定对象之类的,上例绑定的是el, keyup事件,这些也可以通过binding传递,通过vue的自定义指令,可以简化很多重复代码,并且逻辑更加清晰

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

vue 页面加载进度条组件实例

页面加载进度条最初我是在youtube上看到的,后面几乎在各大网站上都能见到它的身影,可以让用户在加载页面的时候不会对着完全空白的页面发呆,提升用户体验但是从开发角度讲,这种进度条在真实性上确实很难把握,因为在逻辑代码加载完成之前,我们都不能统计到进度,而逻辑代码自身的进度也无法统计.另外,我们不可能监控到所有资源的加载情况. 事实上,用户并不是在乎你的页面究竟加载了百分之几,而真正关心的是离加载完还有多久,以及这个空白页面是没有加载完,还是加载完就是空白的.所以没我们需要去"模拟"
vue实现输入框的模糊查询的示例代码（节流函数的应用场景）

上一篇讲到了javascript的节流函数和防抖函数,那么我们在实际场合中该如何运用呢? 首先,我们来理解一下:节流函数首先是节流,就是节约流量.内存的损耗,旨在提升性能,在高频率频发的事件中才会用到,比如:onresize,onmousemove,onscroll,oninput等事件中会用到节流函数: 输入框的模糊查询功能原理分析所谓模糊查询就是不需要用户完整的输入或者说全部输入信息即可提供查询服务,也就是用户可以在边输入的同时边看到提示的信息(其实是查询出来匹配到的信息),百度的搜索功能
vue组件实现进度条效果

本文实例为大家分享了vue实现进度条效果的具体代码,供大家参考,具体内容如下一.效果图二.代码 progress-bar.vue <template> <div class="vue-progress-bar default-theme"> <div class="vue-progress-bar__tip"> <span class="vue-progress-bar__tiplabel">{
Vue进度条progressbar组件功能

效果图首先我们看一下进度条组件运行出来的效果,如下图显示进度条组件实现过程 ◾ 项目搭建 progressbar组件在一个可以直接运行的npm包,通过Yeoman进行构建,再通过Gulp+Webpack构建工具,生成的工作目录如下,其中各个文件夹的内容入之前的一篇文章一样 progressbar组件工作目录 ◾ progressbar源文件之template progressbar组件表现为.vue文件的形式,其中template部分内容如下 progressbar源文件template部
关于vue项目中搜索节流的实现代码

我们经常会遇到这种需求,现在我们在使用百度搜索的时候他们的思想也是根据防抖节流而实现的,至于用防抖还是节流根据自己需求. <template> <input type="text" v-model.trim="sse"> </template> <script> const delay = (function () { let timer = 0 return function (callback, ms) { cl
Vue的事件响应式进度条组件实例详解

写在前面找了很多vue进度条组件,都不包含拖拽和点击事件,input range倒是原生包含input和change事件,但是直接基于input range做进度条的话,样式部分需要做大量调整和兼容性处理.即使做好了,将来需要修改外观,又是一番折腾. 基于以上两个原因,做了一个可以响应input和change事件(即一个是拖动进度条到某处,一个是在进度条某位置点击使其值变为该位置)的div实现的Vue组件,这样既满足了对进度条事件的需求,也带来了如有需求变动,样式修改很方便的好处. 效果图以
vue2.0实现音乐/视频播放进度条组件

基于vue2.0实现音乐/视频播放进度条组件的方法及代码解释,具体内容如下需求分析: ①:进度条随着歌曲的播放延长,歌曲播放完时长度等于黑色总进度条长度:时间实时更新. ②:当滑动按钮时,实时更新播放时间,橙色进度条长度也会随着按钮的滑动而改变,当滑动结束时,橙色区域停留在滑动结束的位置,歌曲从当前进度开始播放. ③:点击进度条,橙色进度条长度变为点击处至起点的长度,并从当前点开始播放歌曲. 大概思路: ①:左边的时间可以通过audio播放时派发的timeupdate事件获取,右边的时间为接口
vue实现简单loading进度条

刚学习vue不久,今天试着用vue做了一个简单的loading进度条,对于vue的生命周期和钩子函数又有了新的理解,下面分享给大家,绝对入门级. 一.进度条原理这个就很简单了,也是我们经常可以用到的,这里只做一个最简单的,页面刷新自动加载进度条.主要是让进度条的width不断增加至100%就可以啦~好了,进入正题. 二.jquery实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset
浅谈VUE防抖与节流的最佳解决方案(函数式组件)

前言有echarts使用经验的同学可能遇到过这样的场景,在window.onresize事件回调里触发echartsBox.resize()方法来达到重绘的目的,resize事件是连续触发的这意味着echarts实例会连续的重绘这是非常耗性能的.还有一个常见的场景在input标签的input事件里请求后端接口,input事件也是连续触发的,假设我输入了"12"就会请求两次接口参数分别是"1"和"12",比浪费网络资源更要命的是如果参数为&quo
在vue项目中使用Nprogress.js进度条的方法

NProgress.js提供页面加载进度条效果,当页面打开加载时,在页面顶部会出现进度条加载动画.NProgress.js是轻量级的进度条组件,使用简便,可以很方便集成到单页面应用中. Ajaxyy应用程序的细长进度条.灵感来自Google,YouTube和Medium. 在vue中使用nprogress.js 安装 $ bower install --save nprogress $ npm install --save nprogress 在项目中引入在main.js中引入要使用的npro

Vue自定义指令封装节流函数的方法示例

相关推荐

随机推荐