vue输入框节流

节流模块：

/***

* @param func 输入完成的回调函数

* @param delay 延迟时间

*/

export function debounce(func, delay) {

    let timer

    return (...args) => {

        if (timer) {

            clearTimeout(timer)

        }

        timer = setTimeout(() => {

            func.apply(this, args)

        }, delay)

    }

}

搜索页面：

<template>

    <div class="xn-container">

        <input type="text" class="text-input" v-model="search">

    </div>

</template>

<script>

    import {debounce} from '../utils/debounce'

    export default {

        name: 'HelloWorld',

        data () {

            return {

                search: ''

            }

        },

        created() {

            this.$watch('search', debounce((newQuery) => {

                // newQuery为输入的值

                console.log(newQuery)

            }, 200))

        }

    }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>

    .text-input {

        display: block;

        width: 100%;

        height: 44px;

        border: 1px solid #d5d8df;

    }

</style>