什么是高频函数？
-
oninput（实时获取输入的数据）
-
onscroll（监听页面的滚动）
-
onresize（监听浏览器可视区域的变化）
-
onmousemove（移动端监听手指在屏幕的滑动）
什么是函数防抖?
-
用户在设定的时间内进行高频操作则不触发业务逻辑代码，如果没有进行高频操作则触发逻辑代码
-
实现原理
-
利用定时器：如果用户在指定的时间不断的高频操作，在操做过程中不断对定时器进行开启和关闭，业务逻辑代码写到到定时器的回调函数中
什么是函数节流？
-
高频函数不断的触发过程中，业务逻辑代码以设定的时间为间隔进行触发
-
实现原理
-
利用某一变量作为定时器开启和关闭的条件，只要定时器没有执行完成，即使高频函数在不断进行触发，也不会重新开启或关闭定时器，业务逻辑代码写在定时器的回调函数中。
案例展示（函数防抖）
<!--模拟百度搜索输入框效果，在每次输入之后会有不同的搜索信息返回-->
<!--html结构-->
<body>
<input type="text">
</body>
// JavaScript代码
let oInput = document.querySelector("input");
oInput.oninput = function () {
console.log(this.value);
console.log("发送请求");
}
// 通过这种方式虽然能满足基本功能效果，但是在输入框每次输入的数据改变时，就会发送请求，那么这样容易造成服务器压力
通过函数防抖进行优化
<!--html结构-->
<body>
<input type="text">
</body>
let oInput = document.querySelector("input");
let timerID = null;
oInput.oninput = function () {
timerID && clearTimeout(timerID);
timerID = setTimeout(() => {
console.log(this.value);
console.log("发送请求");
}, 1000);
}
/*
代码讲解：
1.在高频函数外部设置timerID定时器标志变量，在首次触发高频函数时，判断timerID定时器是否存在，不存在则开启定时器，定时器1000ms后发送请求。
2.如果在1000ms内再次触发高频函数时，判断timerID定时器是否存在，存在先关闭timerID定时器，在开始timerID定时器，如果循环重复。
3.如果在1000ms内没有触发高频函数，那么则成功“发送请求”
通过函数防抖就能解决上述问题，在1秒内不间断输入，那么定时器处于不断的开启关闭状态，时间没超过一秒请求就不会发送
*/
函数防抖的封装过程
/*
初步封装：
只要调用antiShake函数，那么就会返回一个防抖函数
*/
function antiShake() {
var timerID = null;
return function () {
timerID && clearTimeout(timerID);
timerID = setTimeout(function () {
console.log("发送请求");
}, 500);
}
}
// 给antiShake函数添加回调函数形参和时间形参
function antiShake(fn, delay) {
var timerID = null;
return function () {
timerID && clearTimeout(timerID);
timerID = setTimeout(function () {
fn();
}, delay || 500);
}
}
// 改变this指向和传递事件对象
function antiShake(fn, delay) {
var timerID = null;
return function () {
var self = this;
var args = arguments;
timerID && clearTimeout(timerID);
timerID = setTimeout(function () {
fn.apply(self, args);
}, delay || 500);
}
}
防抖函数封装使用
<!--html结构-->
<input type="text">
// antiShake(参数1, 参数2);
// 参数1: 回调函数
// 参数2: 延迟时间，不传递默认为500毫秒
let oInput = document.querySelector("input");
oInput.oninput = antiShake(send);
function send(event) {
console.log("发送请求");
console.log(this);
console.log(event);
}
function antiShake(fn, delay) {
var timerID = null;
return function () {
var self = this;
var args = arguments;
timerID && clearTimeout(timerID);
timerID = setTimeout(function () {
fn.apply(self, args);
}, delay || 500);
}
}
案例展示（函数节流）
<!--实现效果：使一个div元素的宽高在浏览器窗口大小改变时，永远等于可视区域宽高的一半-->
<!--css样式-->
<style>
*{
padding: 0;
margin: 0;
}
div{
width: 300px;
height: 300px;
background: red;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
</style>
<!--html-->
<body>
<div></div>
</body>
// 调用该函数就能使得div元素宽高保持与屏幕可是区域的宽高的一半
function setElement() {
var pageX = window.innerWidth;
var pageY = window.innerHeight;
oDiv.style.width = pageX / 2 +"px";
oDiv.style.height = pageY / 2 +"px";
}
let oDiv = document.querySelector("div");
setElement();
window.onresize = function () {
setElement();
console.log("发生变化了");
}
// 此方法虽然能实现，但是在浏览窗口大小发生改变时，setElement方法被高频率的多次触发
通过函数节流进行优化
<!--css样式-->
<style>
*{
padding: 0;
margin: 0;
}
div{
width: 300px;
height: 300px;
background: red;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
</style>
<!--html-->？
<body>
<div></div>
</body>
function setElement() {
var pageX = window.innerWidth;
var pageY = window.innerHeight;
oDiv.style.width = pageX / 2 +"px";
oDiv.style.height = pageY / 2 +"px";
}
let oDiv = document.querySelector("div");
setElement();
var timerID = null;
var flag = true;
window.onresize = function () {
if (!flag) {
return;
}
flag = false;
timerID && clearTimeout(timerID);
timerID = setTimeout(function () {
flag = true;
setElement();
console.log("我被触发了");
}, 500);
}
/*
代码讲解：
1.在高频函数外部设置timerID定时器标志变量，设置标志符号flag默认取值为true。如果flag为true才执行后面的代码，如果flag为false则不执行后面的代码。
2.当高频函数首次触发时，先让flag取反，再进行timerID判断，如果timerID为null，则开启timerID定时器，定时器在500ms之后被执行，“发送请求”，并flag取反。
3.只要定时没有成功执行完成，flag永远为false，那么定时器就不会不断的重启和关闭，这样就能保证，即使高频函数在不断触发，也能保证业务代码在500ms间断触发
代码含义就是只有if条件语句的条件判断为假才会执行定时器的代码,如果为真则永远不会执行定时器代码,那么整段代码的含义就会变成没500毫秒执行一次业务逻辑代码
*/
函数节流的封装过程
// 只要调用throttling函数,那么就会返回一个防抖函数
function throttling() {
let timerID = null;
let flag = true;
return function () {
if (!flag) {
return;
}
flag = false;
timerID && clearTimeout(timerID);
timerID = setTimeout(function () {
flag = true;
setElement();
}, 500);
}
}
// 设置回调函数形参和时间形参
function throttling(fn, delay) {
let timerID = null;
let flag = true;
return function () {
if (!flag) {
return;
}
flag = false;
timerID && clearTimeout(timerID);
timerID = setTimeout(function () {
flag = true;
fn();
}, delay || 500);
}
}
// 改变this指向和传递事件对象
function throttling(fn, delay) {
let timerID = null;
let flag = true;
return function () {
let self = this;
let args = arguments;
if (!flag) {
return;
}
flag = false;
timerID && clearTimeout(timerID);
timerID = setTimeout(function () {
flag = true;
fn.apply(self, args);
}, delay || 500);
}
}
函数节流的封装使用
<!--css样式-->
<style>
*{
padding: 0;
margin: 0;
}
div{
width: 300px;
height: 300px;
background: red;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
</style>
<!--html-->？
<body>
<div></div>
</body>
// throttling(参数1, 参数2);
// 参数1: 函数
// 参数2: 延迟时间，不传递默认为1000毫秒
let oDiv = document.querySelector("div");
function setElement() {
let pageX = window.innerWidth;
let pageY = window.innerHeight;
oDiv.style.width = pageX / 2 +"px";
oDiv.style.height = pageY / 2 +"px";
}
setElement();
window.onresize = throttling(setElement, 400);
function throttling(fn, delay) {
var timerID = null;
var flag = true;
return function () {
var self = this;
var args = arguments;
if (!flag) {
return;
}
flag = false;
timerID && clearTimeout(timerID);
timerID = setTimeout(function () {
flag = true;
fn.apply(self, args);
}, delay || 500);
}
}
