vue搜索输入请求优化,滑动请求，联想词--节流

创建节流公共方法

/***

• —创建公共的debounce.js
• @param func 输入完成的回调函数在这里插入代码片
• @param delay 延迟时间

export function debounce(func, delay) {
    let timer//定义一个变量接收参数
    return (...args) => {
	        if (timer) {
	            clearTimeout(timer)//每次进入先清一次定时器，防止上次的定时器还在执行
	        }
        timer = setTimeout(() => {
            func.apply(this, args)//更改this指向
        }, 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>