关于vue项目中搜索节流的实现代码

我们经常会遇到这种需求，现在我们在使用百度搜索的时候他们的思想也是

根据防抖节流而实现的，至于用防抖还是节流根据自己需求。

<template>
 <input type="text"  v-model.trim="sse">
</template>
<script>
const delay = (function () {
 let timer = 0
 return function (callback, ms) {
  clearTimeout(timer)
  timer = setTimeout(callback, ms)
 }
})()
export default {
 name : 'search',
 watch : {
 sse () {
 delay(() => {
    this.search()
   }, 500)
},
methods ：{
 search () {
    this.$axios
     .get([url])
     .then(response => {
      // success
     })
     .catch(error => {
      // error
      alert('失败！')
     })
}
}
}
}
</script>

知识点扩展：

关于各种Vue UI框架中加载进度条的正确使用

这里拿MUSE UI 中的进度条举例

  <mu-circular-progress :size="40" class="icon" v-if="isloading"/>
  <div v-show="!isloading">
   <p>内容</p>
  </div>

//数据初始化
 data () {
  return {
   isloading: false
  }
 },
 //页面加载之前
 mounted () {
   this.isloading = true
   this.$axios
    .get([
     '/api/playlist/detail?id=' +
      this.$route.params.id
    ])
    .then(response => {
     // success
     // console.log(response.data)
     this.name = response.data.playlist.name
     this.list = response.data.playlist.tracks
     this.isloading = false
    })
    .catch(error => {
     // error
     alert('失败！')
     console.log(error)
    })
  }

页面加载之前this.isloading = true

v-show='false'不显示页面

当获取数据完毕后

this.isloading = false

进度条消失，页面显示

总结

以上所述是小编给大家介绍的关于vue项目中搜索节流的实现代码,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

赞 (0)

相关推荐

  • vue实现简单loading进度条

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

  • vue实现输入框的模糊查询的示例代码（节流函数的应用场景）

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

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

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

  • vue2.0实现音乐/视频播放进度条组件

    vue2.0实现音乐/视频播放进度条组件

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

  • Vue的事件响应式进度条组件实例详解

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

  • vue组件实现进度条效果

    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项目中使用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自定义指令封装节流函数的方法示例

    节流函数是web前端开发中经常用到的一个开发技巧,在input实时搜索,滚动事件等,为了避免过多消耗性能,我们都会使用节流函数.在<JavaScript高级程序设计>一书中有这样的一个例子: function throttle (method, context) { clearTimeout((method.tId)) method.tId = setTimeout(function () { method.call(context) }, 100) } function resizeDiv

  • 浅谈VUE防抖与节流的最佳解决方案(函数式组件)

    浅谈VUE防抖与节流的最佳解决方案(函数式组件)

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

  • Vue进度条progressbar组件功能

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

随机推荐