弱鸡教你搜索框节流防抖

青旅半醒 2021-10-01 08:50 460阅读 0赞

如果有个需求，用户在搜索框里的，只要搜索框里面的内容变动，就进行异步请求，就理来说这个功能简单的不行。

<template>
        <input type="text" value="" v-model="val"/>
    </template>
    
    <script>
        export default {
            data () {
                return {
                    val: ''
                }
            },
            watch: {
                val(newVla) {
                    setTimeout(() => {
                        //异步请求的数据
                    }, 500)
                }
            }
        }
    </script>

用户每输入一个字母，甚至是数字也会进行异步。  
如果1个用户在输入框中 输入了10个字母，那就是10次异步请求，那如果10个用户同时输入10个字母就是100次异步，如此类推；100个用户、200个用户，所以这一块进行节流防抖很重要，可以非常有效的解决后台的压力对这一块的压力。

> 封装成组件

<template>
        <input type="text" value="" v-model="val"/>
    </template>
    
    <script>
        export default {
            props: ['data'],
            data () {
                return {
                    val: this.data,
                    time: ''
                }
            },
            watch: {
                val (newVla) {
                    let This = this
                    //父级组件绑定data值需要用到的修饰符.sync
                    this.$emit("update:data",newVla)
                    clearTimeout(this.time)
                    this.time = setTimeout(() => {
                    //节流完毕之后触发一个自定义函数
                        This.$emit('chang')
                    }, 500)
                }
            }
        }
    </script>

//父级组件的调用
    <template>
        <view>
            <search-input :data.sync="val" @chang='text'></search-input>
        </view>
    </template>

![18749935-bb38433828360548.gif][]

节流前

![18749935-d03142b717e132a5.gif][]

节流后

[18749935-bb38433828360548.gif]: /images/20210825/a007df3b35d84d28ba14f4b065cef209.png
[18749935-d03142b717e132a5.gif]: /images/20210825/8a46be71e4d6485c92c70a97e8a5712c.png