input debounce

全栈程序员-用户IM • 2022年6月20日上午6:36 • 未分类

大家好，又见面了，我是你们的朋友全栈君。

项目背景是一个搜索框，不能实时的监听onChange 事件去发送请求，这样会造成服务器的压力

解决思路就是用 setTimeout + clearTimeout

普通js代码如下：

/ 下面是普通的js实现，可以参考一下
// 获取input元素
var textInput = document.getElementById('test-input');

// 初始化一个定时器函数
var timeout = null;

textInput.onkeyup = function (e) {
    // 不断重置定时器函数
    clearTimeout(timeout);
    // 500ms内没任何其他输入，获取debounce之后的结果
    timeout = setTimeout(function () {
        console.log('Input Value:', textInput.value);
    }, 500);
};

　　react 项目中的处理：

代码如下：

let timer = null


if(timer){
            clearTimeout(timer)
        }
        timer = setTimeout(()=>{
            fetch("http://baidu.com",{
                method:'POST',
                body: JSON.stringify(body),
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json',
                },
            }).then((result)=>{
                return result.json()
            }).then((res)=>{
                console.log("F209")
                console.log(res)
                if(time>this.state.time){
                    this.setState({
                        time:time,
                        fundList:res.fundList
                    })
                    if(res.fundList===null){
                        this.setState({
                            show:0
                        })
                    }else{
                        this.setState({
                            show:1
                        })
                    }
                }
            }).catch(err=>
                console.log(err)
            )
        },500)

lodash中也提供了debounce函数可以有时间看一下。

转载于:https://www.cnblogs.com/keleyz/p/9640905.html

发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/151590.html原文链接：https://javaforall.cn

【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛

【官方授权正版激活】： 官方授权正版激活支持Jetbrains家族下所有IDE 使用个人JB账号...