欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

js防抖 和节流函数

程序员文章站 2022-05-14 16:36:52
...

最近搞了一个input 输入框 自动完成的效果
大概效果如下链接:
http://www.jq22.com/jquery-info438
然后我是用keyup() 方法监听的input 输入框的值,只要键盘抬起就会去请求接口!所以啊,频率太快,恶心至极。所以要想办法搞丫的一下。不然看着太难受。也影响性能!
突然想起来 vue 的官网上有一个小案例,就是大概这个效果,输入内容的时候不去请求,等输入停下以后,才会去请求,
https://cn.vuejs.org/v2/guide/computed.html 效果在页面最底部,
但是他用的是 Lodash 的 _.debounce 函数来限制的频率操作。而我做的是一个很小的效果,感觉大材小用了(其实是懒)。
有了眉目 顺藤摸瓜,百度一番后了解到了 防抖和节流这两个概念。然后在网上找到了下边的两个方法记录下来

先普及下概念

函数防抖(debounce):当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定的时间到来之前,又一次触发了事件,就重新开始延时。

不有的想起了一个场景,

输入框内容校验 ,类似百度联想词
通过监听 scroll 事件,检测滚动位置,根据滚动位置显示返回顶部按钮
通过监听 resize 事件,对某些自适应页面调整DOM的渲染(通过CSS实现的自适应不再此范围内)
通过监听 keyup 事件,监听文字输入并调用接口进行模糊匹配

函数节流(throttle):当持续触发事件时,保证一定时间段内只调用一次事件处理函数。

在来个不由得想起了一个场景,说这话的时候多少有点尴尬。

抢购的时候。

画外音:任何脱离了业务场景的技术都是耍流氓,防抖也好,节流也罢,适合他的业务场景才是最好的

分析需求。

防抖:我们应该封装一个函数,这个函数需要哪些参数,看上边概念的两个关键字:一定时间(delay),处理函数(fn)。

function debounce(fn, dealy) {
         let timer = null
         return function () {
             //上来的给他清理掉哦,感兴趣的同学可以去研究下setTimeout(),和 
             // clearTimeout
             clearTimeout(timer)
             //在这个时间内我只调用一次事件处理函数,是不是达到防抖的目的呢。
             timer = setTimeout(function () {
                 fn.apply(this, arguments)
             }, dealy)
         }
     }
    // 功能实现,800ms之内,你触发多少次我只执行一次,就是这么任性
    input.oninput = debounce(fn,800)

节流:我们还是应该封装一个函数,需要参数,事件处理函数(fn),一定时间(wait)

function throttle(fn, wait) {
         //定义一个事件为0,第一次肯定会执行
         let lastTime = 0
         return function () {
             //拿到从1970年到现在的时间戳
             let nowTime = new Date.getTime()
             //在这个时间内我才触发事件处理函数,是不是起到节流的目的呢。
             if (nowTime - lastTime > wait) {
                 fn.apply(this, arguments)
                 lastTime = nowTime
             }
         }
     }
     //功能实现,不好意思,300ms这个时间之内,点击我多少次,我就给你处理一次,sorry
     button.click = throttle(fn,300)

最后发现用keyup 来监听input 输入框的内容实在是有点不合适, 想到了 js 原生的 oninput() 方法
教程 网址: http://www.runoob.com/jsref/event-oninput.html
jq 有响应的bind() 的方法可以绑定 oninput 但是有网友说兼容性不太好,建议还是用原生的oninput() 方法

相关标签: 防抖 节流