debounce 函数防抖
1.什么是函数防抖
函数防抖是优化高频率执行 js 代码的一种手段
可以让被调用的函数在一次连续的高频率操作过程中只被调用一次
2.函数防抖的作用
减少代码执行次数,提升网页性能
3.函数防抖的应用场景
- oninput
- onmousemove
- onscroll
- onresize
- 等等
4.搜索框中的函数防抖应用
输入框中每输入一次内容调一次接口,当连续频繁的触发,影响性能,防抖的作用:在连续触发的短时间内只触发一次
<form action="">
<input type="text" />
</form>
<script>
let oInput = document.querySelector("input");
let timer = null;
oInput.oninput = function () {
timer && clearInterval(timer);
timer = setTimeout(() => {
console.log(oInput.value);
}, 1000);
};
</script>
5.防抖函数的封装
function debounce(fn, delay) {
let timer = null;
return function () {
let self = this; // this为调用者,如果不设置this的指向为window
let args = arguments; // 参数
timer && clearInterval(timer);
timer = setTimeout(() => {
fn.apply(self, args);
}, delay || 1000);
};
}
应用
let oInput = document.querySelector("input");
function debounce(fn, delay) {
let timer = null;
return function () {
let self = this; // this为调用者,如果不设置this的指向为window
let args = arguments; // 参数
timer && clearInterval(timer);
timer = setTimeout(() => {
fn.apply(self, args);
}, delay || 1000);
};
}
oInput.oninput = debounce(function (event) {
console.log("发送网络请求");
console.log(this);
console.log(event);
});
throttle 函数节流
1.什么是函数节流
函数节流也是优化高频率执行 js 代码代码的一种手段
可以减少高频调用函数的执行次数
2.函数节流的作用
减少代码执行次数,提升网页性能
3.函数节流应用场景
- oninput
- onmousemove
- onscroll
- onresize
- 等等
4.设置 div 的宽高是始终屏幕可视区域的一半
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 200px;
height: 200px;
background: red;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
</style>
<body>
<div></div>
<script>
// 获取屏幕可视宽高
function getScreen() {
let width, height;
if (window.innerWidth) {
width = window.innerWidth;
height = window.innerHeight;
} else if (document.compatMode === "BackCompat") {
width = document.body.clientWidth;
height = document.body.clientHeight;
} else {
width = document.documentElement.clientWidth;
height = document.documentElement.clientHeight;
}
return {
width: width,
height: height,
};
}
let oDiv = document.querySelector("div");
function resize() {
let { width, height } = getScreen();
oDiv.style.width = width / 2 + "px";
oDiv.style.height = height / 2 + "px";
console.log("gaibial");
}
resize();
function throttle(fn, delay) {
let timer = null;
let flag = true; // 节流阀
return function () {
if (!flag) return;
flag = false;
let self = this;
let args = arguments;
timer && clearTimeout(timer);
timer = setTimeout(() => {
flag = true;
fn.apply(self, args);
}, delay || 500);
};
}
window.onresize = throttle(function () {
resize();
});
</script>
</body>
5.节流函数的封装
function throttle(fn, delay) {
let timer = null;
let flag = true;
return function () {
if (!flag) return;
flag = false;
let self = this;
let args = arguments;
timer && clearTimeout(timer);
timer = setTimeout(function () {
flag = true;
fn.apply(self, args);
}, delay || 1000);
};
}
函数节流和函数防抖的区别
函数节流是减少连续的高频操作函数执行次数(例如连续调用 10 次, 可能只执行 3-4 次)
函数防抖是让连续的高频操作时函数只执行一次(例如连续调用 10 次, 但是只会执行 1 次)
学习笔记 ❥(^_-)