前端javascript的函数节流和函数防抖

2020-10-08 10:47:49 评论 0

函数节流

一个函数执行一次后,只有大于设定的执行周期才会执行第二次.

function throttle(fn, delay) {
    // 记录上一次函数触发的时间
    var lastTime = 0
    return function () {
        // 记录当前函数触发时间
        var nowTime = Date.now()
        if (nowTime - lastTime > delay) {
            fn()
         lastTime = nowTime
        }
    }
 }

测试 :

document.onscroll = throttle(function () {
    console.log('事件触发' + Date.now())
}, 200)

应用:

  • 滚动加载,加载更多或滚动到底部监听
  • 谷歌搜索框,搜索联想功能
  • 高频点击提交,表单重复提交

函数防抖

一个需要频繁触发的函数 在规定事件内 只让最后一次生效 前面的不生效

function debounce(fn, delay) {
    // 记录上一次延时器
    var timer = null
    return function () {
        // 清除上一次的延时器
        clearTimeout(timer)
        // 重新设置新的延时器
         timer = setTimeout(() => {
            fn()
        }, delay)
     }
 }

测试 :

<button id="btn"> 按钮</button>
document.getElementById('btn').onclick = debounce(function () {
    console.log('点击事件被触发了')
}, 1000)

应用 :

  • 手机号、邮箱正则输入检测
  • 搜索框输入:用户最后一次输入完,再发送请求
  • 窗口大小:窗口调整完成后,计算窗口大小,防止重复渲染

版权声明:本文著作权归原作者所有,欢迎分享本文,谢谢支持!

转载请注明:前端javascript的函数节流和函数防抖

评论

还没有任何评论,你来说两句

发表评论

*

支持使用以下 HTML 代码: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

分类目录

日历

2020年十月
 1234
567891011
12131415161718
19202122232425
262728293031