使用vue实现防抖
场景:当需要用输入框的输入的值进行实时验证或搜索时// debounce.jsexport const debounce = (() => {let timer = nullreturn (callback, wait) => {clearTimeout(timer)timer = setTimeout(callback, wait)}})()// test.vue<templa
·
场景:当需要用输入框的输入的值进行实时验证或搜索时
// debounce.js
export const debounce = (() => {
let timer = null
return (callback, wait) => {
clearTimeout(timer)
timer = setTimeout(callback, wait)
}
})()
// test.vue
<template>
<div class="movie-search-box">
<label for="movieName">请输入电影名字</label>
<input id="movieName" type="text" @keyup="getMovieName">
</div>
</template>
<script>
import { debounce } from "./debounce"
export default {
name: 'test',
data () {
return {}
},
methods: {
getMovieName (e) {
debounce(() => {
console.log(e.target.value)
}, 1000)
}
}
}
</script>
注:函数防抖也是闭包的一个使用场景;同vue组件中的data需要在return中设置变量一样——防止全局变量的污染;当该页面有多个函数同时调用防抖时,如果不使用闭包单独生成一个的空间,将会相互影响。
更多推荐
已为社区贡献4条内容
所有评论(0)