关于前端:函数节流和函数防抖

31次阅读

共计 685 个字符,预计需要花费 2 分钟才能阅读完成。

函数节流

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

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)

利用 :

  • 手机号、邮箱正则输出检测
  • 搜寻框输出:用户最初一次输出完,再发送申请
  • 窗口大小:窗口调整实现后,计算窗口大小,避免反复渲染

正文完
 0