1、防抖
防抖原理
多次触发事件,事件处理函数只能执行一次,并且是在触发操作结束后执行。
// 防抖:用户触发事件过于频繁,只要最后一次事件的操作
function debounce(fn, delay) {
let timer = null;
return function(...args) {
//如果上一次有事件触发,清除计时器
if(timer) clearTimeout(timer);
timer = setTimeout(() => {
fn.apply(this, args); //this指向fn
}, delay);
}
}
使用一个简单的例子演示一下:
代码展示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>防抖</title>
</head>
<script>
window.onload = function () {
function debounce(fn, delay) {
let timer = null;
return function (...args) {
//清除上一次的定时器
if(timer) clearTimeout(timer);
timer = setTimeout(() => {
fn.apply(this, args); //改变this的指向,为fn
}, delay)
}
}
let btn = document.getElementById('btn');
btn.onclick = debounce(function() {
console.log('按钮被点击了');
}, 1000);
}
</script>
<body>
<button id="btn">按钮</button>
</body>
</html>
显示效果:
2、节流
节流原理
事件触发后,规定时间内,事件处理函数不能再次被调用。也就是说,规定时间内,函数只能够调用一次,并且是最先触发的那次调用
function throttle(fn, delay) {
var lastTime = 0;
return function(...args) {
var nowTime = Date.now();
if(nowTime - lastTime > delay) {
fn.apply(this, args);
lastTime = nowTime;
}
}
}
使用一个简单的例子演示一下:
代码展示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>节流</title>
</head>
<style>
body {
height: 2000px;
}
</style>
<script>
// 在一定的时间间隔内,只触发一次事件,并且执行的是最先触发的那次
function throttle(fn, delay) {
let lastTime = 0;
return function (...args) {
// 记录现在的时间
let nowTime = Date.now();
if(nowTime - lastTime > delay) {
fn.apply(this, ...args);
lastTime = nowTime; //更新一下最后的时间
}
}
}
window.onscroll = throttle(function () {
console.log('您拖动了我呀!!!')
}, 2000);
</script>
<body>
</body>
</html>
显示效果: