vue中使用防抖函数
2019-03-04 12:39
741 查看
[code]<input v-model="searchText" @input='search' placeholder="搜索电影" class="search-placeholder">
在公共的js文件utils.js中添加防抖函数如下:
[code]export default { debounce(fn, delay = 300) { //默认300毫秒 var timer; return function() { var args = arguments; if(timer) { clearTimeout(timer); } timer = setTimeout(() => { fn.apply(this, args); // this 指向vue }, delay); }; } }
调用:
[code]import utils from "@/js/utils"; export default { methods: { search: utils.debounce(function() { let v = this; let serchURL = `/movie/search?q=${v.searchText}&start=0&count=10`; v.$axios .get(serchURL) .then(response => { v.processSearchData(response.data); }) .catch(error => { console.log(error) }) .finally() }) } }
相关文章推荐
- vue渲染函数render的使用
- vue中使用函数绑定时报错has already been defined as a data property
- vue2.0使用ES6语法的箭头函数对this作用域的理解
- 函数防抖封装为vue的自定义指令
- vue中html模板使用绑定的全局函数
- Vue中使用 setTimeout() setInterval()函数的问题
- 使用 vue 1.0.3 $set 函数遇到的坑
- Vue指令的钩子函数使用方法
- 关于vue组件中定时器中只能使用箭头函数的问题
- 在Vue中使用async函数
- vue 子组件使用父组件的函数
- vue 使用箭头函数会报错
- vue.js中生命周期与相关函数的使用总结
- vue编写messageBox,使用函数调用
- VC中使用GDI函数实现位图的透明
- 使用"函数递归"实现的树型菜单 (转)
- 关于fopen函数中路径名使用字符串的一点看法
- C#中使用网络函数 (第一部分 用户函数)[翻译]
- 钩子技术介绍及函数使用
- 如何在Vb.NET中使用带返回的函数作为委托?