JavaScript节流和防抖函数与及使用分时函数惰性函数优化性能
2019-03-05 22:43
776 查看
一、节流函数
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节点的时候,显然会造成浏览器 20000 的卡顿。
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 性能优化技巧:函数节流
- JavaScript性能优化之函数节流(throttle)与函数去抖(debounce)
- JavaScript-性能优化,函数节流(throttle)与函数去抖(debounce)
- (转)JavaScript-性能优化之函数节流(throttle)与函数去抖(debounce)
- JavaScript 性能优化技巧:函数节流
- Javascript性能优化之 函数节流技术
- JavaScript-性能优化,函数节流(throttle)与函数去抖(debounce)
- JavaScript性能优化技巧之函数节流
- JavaScript性能优化技巧之函数节流
- JavaScript性能优化之函数节流(throttle)与函数去抖(debounce)
- JavaScript性能优化技巧之函数节流
- JavaScript优化之函数节流与函数防抖
- javascript性能优化之分时函数的介绍
- JavaScript 频繁发射事件处理的优化 --- 函数节流/事件稀释
- 利用函数的惰性载入提高 javascript 代码性能
- JavaScript 频繁发射事件处理的优化 --- 函数节流/事件稀释
- js网络请求性能优化之防抖与节流
- [JavaScript]使用document.createDocumentFragment优化性能
- oracle 性能优化操作十四: 使用基于函数的索引
- javascript性能优化之局部变量的使用