项目技巧——函数节流

一、前言

最近用vue在写一个类商城，无法避免肯定会有商品搜索模块，如果要做搜索建议的显示或自动补全，那么必然需要监听输入内容向后台发送请求。然而每次键入都发送一次请求到后台是非常好性能的，很多时候用户需要看到的是自己输完整个词语才显示结果，这时候就需要我们自己手动去做个节流了。

二、函数节流

主要用了setTimeout方法，同时结合每次运行前clear一遍来达到节流效果，整个出来的逻辑就是只有当用户最后一次键入，才真正触发事件。

// 函数节流
export const debounce = (func, delay = 200) => {
    let timer = null;

    return function(...args) {
        timer && clearTimeout(timer);
        timer = setTimeout(() => {
            func.apply(this,args);
        },delay)
    };
};

用了es6的语法，更加简便、语义化。

三、使用示例

就拿一个需要暴露事件给父组件的input框来举例：(以Vue项目为例子)
input框组件中：

<template>
	<div>
		<input type="text" :placeholder="placeholder" ref="input" v-model="query" />
	</div>
</template>
<script>
import {debounce} from 'assets/js/util' //这个是上面的函数分流方法
export default {
	watch:{
      query:debounce(function(){
         this.$emit('query',this.query)
      })
}
</script>