抖动

145 阅读1分钟

抖动:

什么是抖动?

当我们频繁触发一个事件时,就会频繁的向后台发送请求。直到任务完成时,之前的请求都是多余的,只有最后一个是有用的,严重影响用户体验和服务器的性能。这种问题就叫抖动。

如何解决抖动?

设置延时器,判断一段时间内用户是否输入。 具体3步 1.定义防抖动的延时器timer 2.定义防抖函数 3.触发事件时,立即清空timer

以下是我做的输入框防抖,每隔1s才会发出请求。

;$(function(){
    $('#ipt').on('keyup',function(){
        //3.清空延时器
        clearTimeout(timer)
        let keywords = $(this).val().trim()
        if(keywords.length <= 0){
            return
        }
        // console.log(keywords);
        // getSuggestList(keywords)
        defendsearch(keywords)
    })
    
    //1.定义防抖动的延时器timer
    let timer = null;
    
     //2.定义防抖函数
    function defendsearch(kw){
        timer = setTimeout(function(){
            getSuggestList(kw)
        },1000)
    }
})