前端抖动的解决方案

如果一个函数持续地触发,那么只在它结束后过一段时间只执行一次。像是两个人的对话,A在不停的balabala(持续触发)

请注意,本文编写于 202 天前,最后修改于 202 天前,其中某些信息可能已经过时。

在家呆久了,就会有一张莫名的懒散。躺在床上,倚在沙发上,嘴里塞满老妈做的煎饼果子、蒸饺和各式菜肴,身体日渐肥胖,我的codeing灵感,也因此一再愚钝,甚至有着堵塞的感觉。疫情当关,在我们和病毒的抗争,在隔离期,已经演变成为了和懒散、怠惰的精神状态的抗争。
话满三句,今天的知识点概念,务必清晰。

f56d5171b83d3c14d6552bb2fe4345f0_r.jpg
f56d5171b83d3c14d6552bb2fe4345f0_r.jpg

话题引出:在日常的研发途中,我们前端会遇到一种业务场景。【输入关键词及时响应搜索】这是一个无比常见的功能模块,我们通常会以监听输入作为锚点,在input的内容作出变化时,调用方法请求后台数据,继而渲染页面。但是,如果用户的输入内容变化频率很高时,就会产生页面抖动的情况,损害用户体验。

具体点:譬如,在输入栏,我要搜索“谁是世界上最健美的人?”,(已设定结果)然后页面下方展现出我的资料。 但是,如果让打字稍慢的妹妹来输入,他可能输到"最"的时候,监听事件启动搜索,然后出来一堆“谁是世界上最笨”,“谁是世界上最胖”之类的关键词结果。我们要求不多,只需要在输入完成后进行搜索,方案,其实就是通过防抖。

解决方案:防抖的定义:如果一个函数持续地触发,那么只在它结束后过一段时间只执行一次。像是两个人的对话,A在不停的balabala(持续触发),如果他说话的时候有停顿(一定间隔),但是停顿的时间不够长,就认为A没有说完, 当停顿时间超过一某个范围就认为A说完了,然后B开始回答(响应)。

在观赏了大佬博客们的手笔后,我手写了一个我所理解最为简单的实现方式。
/*

  • fn [function] 需要防抖的函数
  • delay [number] 毫秒,防抖期限值
    */

function debounce(fn,delay){

let timer = null //借助闭包
return function() {
    if(timer){
        clearTimeout(timer) //进入该分支语句,说明当前正在一个计时过程中,并且又触发了相同事件。所以要取消当前的计时,重新开始计时
        timer = setTimeOut(fn,delay) 
    }else{
        timer = setTimeOut(fn,delay) // 进入该分支说明当前并没有在计时,那么就开始一个计时
    }
}

}

实际上,我们可以随着思路的发散,进一步看到定时器内的行为函数是一定会执行的,所以调整一下顺序,简化代码:

function debounce(fn,delay){

let timer = null //借助闭包
return function() {
    if(timer){
        clearTimeout(timer) 
    }
    timer = setTimeout(fn,delay) // 简化写法
}

}

这样一个简单的防抖函数就包装好了,我们可以在日常的具体业务中遇到更多防抖函数的用武之地。
比如,用户注册时候的手机号码验证和邮箱验证,只有等用户输入完毕后,才需要检查格式是否正确,如果不正确,再弹出提示语之类的。
相信我们能探索到更为高效的用法。

添加新评论