做搜索框查询，防止用户输入过快，可以用什么框架？

Question

就是用户输入字符串，然后发ajax后台请求的，用户连续输入，我取租后一个值去查询

我知道的可以用 rxjs，不知道 lodash 是否能做到？ 网上查询了一下没有找打结果

Answer 1

没有这么复杂的...
用个setTimeout就行了：

data:{
    timer: null
},
methods:{
    handleChange(){
        this.timer = new Date().getTime()//每次搜索框值改变都保存当前时间
        setTimeout(()=>{
            //0.5秒后比较当前时间和最后一次搜索框值改变时的时间的差值
            //只有大于等于setTimeout的间隔才调取接口
            if(new Date().getTime() - this.timer >= 500){
                this.doAjax()
            }
        },500)
    }
}

Answer 2

lodash 的 debounce

import debounce from 'lodash/debounce'

export default {
    ...
    data () {
        return {
            searchText: ''
        }
    },
    
    watch: {
        // 每次输入文字改变的时候，调用「去抖过的搜索函数」
        searchText: 'debounceSearch'
    },
    
    methods: {
        search () {
            // 搜索逻辑
        }
    },
    
    created () {
        // debounceSearch 的作用 - 对搜索函数进行「去抖」
        // 即在 500ms 内，如果一直有文字发生变化，**this.search 就不会调用**
        // 直到 500ms 后，无搜索文字变化了再调用 this.search
        this.debounceSearch = debounce(this.search, 500)
    }
    ...
}

顺便说一下，debounce 的实现就是基于 setTimeout，并没有什么神奇的东西，楼上也有小伙伴给出了相关示例

最后推荐使用 lodahs/debounce，毕竟项目中还是要尽量避免重复造轮子。如果不是很清楚原生怎么实现的，倒是可以去自己实现一个。

Answer 3

rxjs,lodash 都可以做到，里面debounce的函数可以辅助。
其实这个需求，没你想的这么复杂，用这些有点杀鸡用牛刀的意思。自己写个setTimeout简单控制下就可以了，网上的示例很多，你可以查下。

Answer 4

不用框架啊！可以自己写这个。

现在你的问题描述不是很清楚，你这个后台去请求是点击按钮后？还是每次通过change事件去提交，如果根据change事件其实可以加个类似硬件去抖的功能，什么意思呢？就是延迟一段时间去判断是否值是否发生变化，如果没有则提交如果有就等待一段时间后在比对

Answer 5

lodash

Answer 6

可以用watch检测输入框的改变，然后settimeout延时做一个判断