在Vue中实现防抖

最新推荐文章于 2024-07-25 10:54:43 发布

weixin_34344403

最新推荐文章于 2024-07-25 10:54:43 发布

阅读量1w

点赞数 2

文章标签： javascript 前端 ViewUI

原文链接：https://juejin.im/post/5cc5429a6fb9a032453bb6e3

版权

// tools.js
export function debounce (fn, delay) {
    let timer = null
    return function () {
        let arg = arguments
        
        clearTimeout(timer)
        
        timer = setTimeout(() => {
            fn.apply(this, arg)
        }, delay)
    }
}
复制代码

// App.vue
<template>
    <div id="app">
        <input v-model="text" type="text">
    </div>
</template>

<script>
    export default {
        name: 'App',
        data () {
            return {
                text: ''
            }
        },
        created () {
            this.$watch('text', debounce((newValue, oldValue) => {
                console.log(newValue)
            }, 300))
        }
    }
</script>
复制代码