函数节流和函数防抖

函数节流

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

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)

应用 :

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