防抖函数作用
例如一个搜索框，我们输入数字监听keyup事件，然后获取用户输入的内容发送请求，如果不使用防抖函数，则会一直发送请求，比较浪费资源。
防抖函数原理
定义一个变量，后面方便赋值给定时器，监听keyup事件，在每次用户输入的时候，判断定时器是否存在，存在则清除定时器，不存在则创建定时器，然后执行相关的逻辑，最后删除定时器
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<input type="text" id="input1">
</div>
<script>
var input1 = document.getElementById('input1');
let timer;
input1.addEventListener('keyup', function () {
// 每次输入内容的时候清空定时器，只有在不输入内容后500毫秒才会执行定时器中的内容
//如果定时器存在则清空
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(function () {
//在用户500毫秒内没有输入内容，就会触发console.log，最后清空定时器
console.log(input1.value)
timer = null
}, 500)
})
</script>
</body>
</html>封装防抖函数
function debounce(fn, delay = 500) {
let timer = null;
return function (t) {
if (timer) {
clearTimeout(timer)
}
timer = setTimeout(() => {
fn()
timer = null
}, delay)
}
}
input1.addEventListener('keyup', debounce(function () {
console.log(input1.value)
}, 600))节流函数
例如滚动到底部加载图片，在一定时间段内置触发一次
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
img {
display: block;
margin-bottom: 50px;
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<div id="div">
<img src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
<img src="http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg" alt="">
<img src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
</div>
</body>
<script>
function lazyload() { //监听页面滚动事件
var documentHeight = document.documentElement.offsetHeight; //文档总高度
var seeHeight = document.documentElement.clientHeight; //可见区域高度
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //滚动条距离顶部高度
if (documentHeight - seeHeight - scrollTop < 30) {
var imgElement = document.createElement('img');
imgElement.setAttribute('src', 'http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg');
document.querySelector('#div').appendChild(imgElement);
}
}
// 简单的节流函数
//fun 要执行的函数
//delay 延迟
//time 在time时间内必须执行一次
function throttle(fun, delay, time) {
var timeout,
startTime = new Date();
return function () {
var context = this,
args = arguments,
curTime = new Date();
clearTimeout(timeout);
// 如果达到了规定的触发时间间隔，触发 handler
if (curTime - startTime >= time) {
fun.apply(context, args);
startTime = curTime;
// 没达到触发间隔，重新设定定时器
} else {
timeout = setTimeout(function () {
fun.apply(context, args);
}, delay);
}
};
};
// 采用了节流函数
window.addEventListener('scroll', throttle(lazyload, 500, 1000));
</script>
</html>第二种
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
img {
display: block;
margin-bottom: 50px;
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<div id="div">
<img src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
<img src="http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg" alt="">
<img src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
</div>
</body>
<script>
function lazyload() { //监听页面滚动事件
var documentHeight = document.documentElement.offsetHeight; //文档总高度
var seeHeight = document.documentElement.clientHeight; //可见区域高度
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //滚动条距离顶部高度
if (documentHeight - seeHeight - scrollTop < 30) {
var imgElement = document.createElement('img');
imgElement.setAttribute('src', 'http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg');
document.querySelector('#div').appendChild(imgElement);
}
}
function throttle(fun, delay, time) {
var timeout;
return function () {
var context = this;
if (timeout) {
clearTimeout(timeout);
// 没达到触发间隔，重新设定定时器
}
timeout = setTimeout(function () {
fun();
}, delay);
};
};
// 采用了节流函数
window.addEventListener('scroll', throttle(lazyload, 500, 1000));
</script>
</html>
发表评论
侧栏公告
寄语
譬如朝露博客是一个分享前端知识的网站，联系方式11523518。
热评文章
标签列表
热门文章
友情链接