共计 2728 个字符，预计需要花费 7 分钟才能阅读完成。
一、节流函数
1. 使用场景
DOM.onclick()事件，我们给一个 DOM 节点绑定了点击事件，当点击该元素时触发事件函数的执行，但是当我们频繁点击该元素时，就会不断触发该点击事件，如果该点击事件触发的事件函数是 DOM 元素的，就会造成很高的性能消耗，可能会造成页面的卡顿。
所以此时我们应该限制该事件的触发频率，减少页面的开销。
2. 原理
连续触发事件，但是事件函数只在在规定的周期之内只执行一次。
3. 代码实现
function throttle(fn, wait = 500) {
let lastTime = 0 // 初始化上一次调用的事件
return function () {
let args = [].slice.call(arguments) // 将类数组转化为数组
let nowTime = new Date().getTime() // 获取当前时间
if(nowTime – lastTime > wait) {
fn.apply(this, args)
lastTime = nowTime // 把上一次调用时间重新赋值
}
}
}
// 使用
let btn = document.getElementById(‘btn’)
let fn = function () {
console.log(1)
}
btn.onclick = throttle(fn, 1000)
在给按钮加上点击事件后，即使一直不停的点击按钮，也只会每隔 1000ms 执行一次事件处理函数。
二、防抖函数
1. 使用场景
例如我们在百度搜索的输入框输入我们想要搜索的内容，在我们停止输入后一小段时间 (delay) 后就会得你输入框得内容然后进行搜索，如果你在输入后暂停的时间小于规定的时间(delay)，就会重新计算该时间。
2. 原理
所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。
3. 代码实现
function debounce(fn, delay) {
let timer = null
return function () {
let _self = this
let args = [].slice.call(arguments)
clearTimout(timer)
timer = setTimout(function () {
fn.apply(_self, args)
}, delay)
}
}
// 使用
let inp = document.getElementById(‘inp’)
function handler() {
console.log(this.value)
}
inp.oninput = debounce(handler, 500)
在使用节流函数后，我们在暂停输入的 500ms 后就会输入输入框内的值，暂停时间小于 500ms，则不会输出，将重新计算函数执行时间。
三、分时函数
比如我们在将一个很大的数据渲染成列表的时候，我们要求必须将所有数据渲染完成，不能使用懒加载，所以这样当我们在短时间内往页面添加大量的 DOM 节点的时候，显然会造成浏览器的卡顿。
let arr = []
for(let a = 0; a < 1000; a++) {
arr.push(a)
}
function render(data) {
for(let i = 0; i < arr.length; i++) {
let div = document.createElement(‘div’)
div.innerHTML = arr[i]
document.body.appenChild(div)
}
}
render(arr)
所以我们我们创建一个函数，然节点的添加分时进行，比如把在 1s 添加 1000 个节点改为每隔 200ms 添加 20 个节点。
let timeChunk = function (data, fn, count = 20, delay = 200) {
let obj,timer
let start = function () {
for(let i = 0; i < Math.min(count, data.length); i++) {
let obj = data.shift()
fn(obj)
}
}
return function () {
timer = setInterval(function () {
if(data.length === 0) {
return clearInterval(timer)
}
start()
}, delay)
}
}
使用分时函数
let arr = []
for (let a = 0; a < 1000; a++) {
arr.push(a)
}
function render(data) {
let div = document.createElement(‘div’)
div.innerText = data
document.body.appendChild(div)
}
let renderlist = timeChunk(arr, render, 20, 200)
renderlist()
这样在调用分时函数后每隔 200ms 创建 20 个节点。
四、惰性函数
在前端开发中，因为浏览器的差异，一些嗅探工作是不可避免的，比如要实现一个在各个浏览器中都通用的添加事件函数。常见写法：
let addEvent = function (element, type, handler) {
if(window.addEventListener) {
return element.addEventLisenter(type, handler, false)
} else if (window.attachEvent) {
return element.attachEvent(‘on’+type, handler)
}
}
但是我们每次执行函数的时候都要进行分支判断，然后当我们在确定了在哪一种浏览器中执行该函数的时候，我们只需要在第一次判断，后面的使用都不用判断，因为我们是在同一个浏览器执行该函数。
所以我们可以使用惰性加载函数，在函数体内往往都会有一些分支判断，但是在第一次进入分支条件后，在函数内部会重写这个函数，重写之后就是我们所期望的函数，在下一次再进入函数的时候不用在进行分支判断。
let addEvent = function (element, type, handler) {
if(window.addEventListener) {
addEvemt = function(element, type, handler) {
element.addEventLisenter(type, handler, false)
}
} else if (window.attachEvent) {
addEvent = function(element, type, handler) {
element.attachEvent(‘on’+type, handler)
}
}
addEvent(element, type, handler)
}
大家可以关注我的掘金地址
参考文献
JavaScript 设计模式与开发实践
