1、函数节流:让一个函数在执行了一次之后,在规定时间内不会执行第二次。
比如说:有一个需要频繁触发的函数,处于性能优化的角度,让他在规定时间内只有第一次触发生效。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>函数节流demo</title>
<style>
html,body { height: 800%;/* 要有足够高度去测试滚动 */}
</style>
</head>
<body>
<script>
// @param fn 要被节流的函数
// @param delay 规定时间
function throttle(fn, delay) {
var lastTime = 0;
//使用闭包是为了避免lastTime每次都初始化
return function() {
//获取当前时间戳
var nowTime = Date.now();
if (nowTime - lastTime > delay) {
fn();
lastTime = nowTime; //记录最后一次执行时间
}
}
}
//用屏幕滚动测试函数节流
document.onscroll = throttle(function() {
console.log('触发滚动函数' + Date.now());
}, 5000);
</script>
</body>
</html>
函数节流结果:如下图,函数在规定时间内不会出现触发两次情况;
2、函数防抖 :一个需要频繁触发的函数,在规定时间内,只让他的最后一次触发生效,前面的都不生效;
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>函数防抖demo</title>
</head>
<body>
<button id='btn'>按钮</button>
<script>
// @param fn 要被节流的函数
// @param delay 规定时间
function debounce(fn, delay) {
var timer = null;
return function() {
//清除上一次延时器
clearTimeout(timer);
timer = setTimeout(function() {
fn.apply(this); //解决this指向问题
}, delay)
}
}
document.getElementById('btn').onclick = debounce(function() {
console.log('点击事件被触发 ' + Date.now());
}, 500)
</script>
</body>
</html>
函数防抖结果:如下图,即使在规定时间内点击了按钮很多次,函数也只会执行一次!就达到了防抖的效果
ps:学习过程的简单记录,若有不恰当之处,欢迎指正!