vue实现防抖的实例代码
防抖：防止重复点击触发事件
首先啥是抖？ 抖就是一哆嗦！原本点一下，现在点了3下！不知道老铁脑子是不是很有画面感！哈哈哈哈哈哈
典型应用就是防止用户多次重复点击请求数据。
vue实现防抖方法如下：
1.首先新建一个debounce.js代码如下
const debounce=function(fn, delay){
let timer = null
return function(){
let content = this;
let args = arguments;
if(timer){
clearTimeout(timer)
}
timer = setTimeout(()=>{
fn.apply(content,args)
}, delay)
}
}
export default debounce
2.在需要防抖的vue文件中引入debounce，内容如下；这是一个输入框的500ms的防抖
<template>
<div class="main">
<el-input v-model="input" @change="changeSeletc" placeholder="请输入内容"></el-input>
</div>
</template>
<script>
import debounce from "../utils/debounce"
export default {
name: "alarm",
data(){
return{
input: ''
}
},
methods:{
changeSeletc:debounce(function () {
console.log(this.input)
},500),
}
}
</script>
<style scoped>
</style>
3.效果如下图
总结
到此这篇关于vue实现防抖的文章就介绍到这了,更多相关vue实现防抖内容请搜索小牛知识库以前的文章或继续浏览下面的相关文章希望大家以后多多支持小牛知识库！
-
本文向大家介绍在vue+element ui框架里实现lodash的debounce防抖，包括了在vue+element ui框架里实现lodash的debounce防抖的使用技巧和注意事项，需要的朋友参考一下 事情起因在：我使用element ui框架里的远程搜索框，在单选时，组件内部已经做了防抖，query是在一段时间内的字符串。但是在多选时，并没有做防抖，而是每输入一个字符都要向后台发一次请
-
本文向大家介绍vue 实现的树形菜的实例代码，包括了vue 实现的树形菜的实例代码的使用技巧和注意事项，需要的朋友参考一下 下面一段代码给大家介绍vue 实现的树形菜单功能，具体代码如下所示： 总结 以上所述是小编给大家介绍的vue 实现的树形菜的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对呐喊教程网站的支持！
-
本文向大家介绍vue+axios实现登录拦截的实例代码，包括了vue+axios实现登录拦截的实例代码的使用技巧和注意事项，需要的朋友参考一下 一个项目学会vue全家桶+axios实现登录、拦截、登出功能，以及利用axios的http拦截器拦截请求和响应。 前言 该项目是利用了Github 提供的personal token作为登录token，通过token访问你的Repository List。
-
本文向大家介绍使用vue实现grid-layout功能实例代码，包括了使用vue实现grid-layout功能实例代码的使用技巧和注意事项，需要的朋友参考一下 1.先clone项目到本地。 2.git reset --hard commit 命令可以使当前head指向某个commit。 完成html的基本布局 点击复制按钮来复制整个commit id。然后在项目根路径下运行 git reset 。
-
本文向大家介绍Django+Vue实现WebSocket连接的示例代码，包括了Django+Vue实现WebSocket连接的示例代码的使用技巧和注意事项，需要的朋友参考一下 近期有一需求：前端页面点击执行任务，实时显示后端执行情况，思考一波；发现 WebSocket 最适合做这件事。 效果 测试 ping www.baidu.com 效果 点击连接建立ws连接 后端实现 所需软件包 后端主要借助
-
本文向大家介绍PHP防盗链代码实例，包括了PHP防盗链代码实例的使用技巧和注意事项，需要的朋友参考一下 防盗链是目前非常常见的web程序设计技巧。本文就以一个实例展示了PHP防盗链的实现方法。分享给大家供大家参考之用。具体方法如下： 主要功能代码如下： 希望本文所述对大家学习PHP程序设计有所帮助。