网页性能优化04-函数节流

本文主要是介绍网页性能优化04-函数节流，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

函数节流（throttle）

1-函数节流介绍

1.先理解什么是js中的高频事件
- 高频事件 : 触发频率极高的事件。例如 滚动条事件onscroll 鼠标移动onmousemove 网页大小变化onresize等
  - 高频触发:事件本身不是高频的，但是用户可以通过很快的手速来触发。例如用户疯狂快速点击抢购按钮（onclick,onmousedown）

在这里插入图片描述

2.高频事件的危害
- a.浪费资源，降低网页速度，甚至导致浏览器卡死：由于高频事件触发非常频繁，可能1秒钟会执行几十次甚至上百次，如果在这些函数内部，又调用了其他函数，尤其是操作了DOM (DOM操作耗性能且可能导致浏览器出现回流) ，不仅仅会降低整个网页的运行速度，甚至会造成浏览器卡死，崩溃。
- b.网络堵塞 ：如果在高频事件中，进行了重复的ajax请求，可能会导致请求数据出现混乱，并且还占用服务器带宽增加服务器压力（间接增加服务器成本）
3.函数节流介绍（throttle）
- 函数节流：限制事件处理函数的执行周期。
  - 例如：鼠标点击事件，限制0.5s内只能被触发一次。无论你点击有多快，0.5s也只会执行一次。

2-函数节流解决思路

限制事件处理函数的执行周期

1.声明变量记录上一次触发时间（默认为0，保证事件第一次无条件触发）
2.触发时间时：判断现在的时间和上一次时间的间隔是否大于 节流间隔
3.成功触发后：将现在的时间变成下一次时间的参考时间
- 现任女友已经结束了，她已经成为下一任女友故事里的前任女友

//函数节流1 ： 声明变量记录上一次事件触发时间var lastTime = 0;//1.1 鼠标移动事件var i = 0;window.onmousemove = function () {//函数节流2 ： 判断触发时间间隔 (0.5秒 = 500ms)var currentTime = new Date().getTime(); //当前时间if (currentTime - lastTime > 500) {//事件处理函数i++;console.log('鼠标移动事件被触发' + i + '次');//函数节流3 ： 事件成功触发之后，当前时间 成为 下一次触发间隔参考时间//说人话：现任女友已经结束了， 她已经成为下一任女友 故事里的 前任女友 lastTime = currentTime;};};

在这里插入图片描述

3.万能节流函数的封装

为什么要封装万能的节流函数
- 在上一个小节中，我们的重点是介绍函数节流的思路。但是在实际开发中，每一个节流函数的事件处理都是不一样的，他们可能是鼠标移入、鼠标移出、鼠标移动。每一个案例需要的节流间隔也不同

/**
* @description: 函数节流
* @param {type} fn: 事件处理函数
* @param {type} timeout: 节流间隔
* @return: 
*/
function throttle(fn, timeout) {/*核心技术介绍 1. 函数节流需要使用变量来存储  上一次触发时间2. 这个变量如果是局部变量 ： 则函数完毕会被回收。 如果是全局变量：则会造成全局变量污染3.解决方案 ： 利用函数本身也是对象，使用函数本身的静态成员来存储 上一次触发时间*///给throttle添加静态成员lastTimeif(!throttle.lastTime){/* 为什么一定要有这一步呢？因为函数对象的属性不存在时，默认取值会得到undefined，而undefined在做数学计算的时候会转成number类型得到NaN. Number(undefined) 结果是NaN。无法计算*/throttle.lastTime = 0;};//1.记录当前时间var currentTime = new Date().getTime();//2.判断触发时间间隔if (currentTime - throttle.lastTime > timeout) {fn();//3.将当前时间作为 下一次触发时间 参考时间throttle.lastTime = currentTime;};
};

//1.2 滚动条事件
var j = 0;
window.onscroll = function () {//节流函数 ： 滚动条 0.5s 只会执行一次throttle(function () {j++;console.log('滚动事件被触发' + j + '次');}, 500);
};//2. 高频触发 ：事件本身触发不频繁， 但是用户可以通过疯狂触发来实现高频
var btn = document.querySelector('#btn');
var p1 = document.querySelector('#p1');
var k = 0;
btn.onclick = function () {//节流函数 : 按钮1s 只能点击一次throttle(function () {k++;p1.innerText = '点击事件被触发' + k + '次';}, 1000);
};