函数节流

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

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)

利用 :

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