手写节流和防抖函数
一、防抖函数
应用场景
- 输入框中频繁的输入内容，搜索或者提交信息；
- 频繁的点击按钮，触发某个事件；
- 监听浏览器滚动事件，完成某些特定操作；
- search搜索联想，用户在不断输入值时，用防抖来节约请求资源。
- window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次
**原理：**在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。
**大白话版原理：**小明答应在三天之后还钱给小红，但是小红在三天内如果再催小明还钱的话，则会重新开始计算这三天时间，只有三天内小红不催小明换钱，三天后小明才会还小红的钱
1.基础版防抖函数
简单的实现了防抖函数的功能
<!DOCTYPE html>
<head>
<title>Document</title>
</head>
<body>
<button>点击</button>
</body>
<script>
let btn = document.querySelector('button')
function debounce(fn, time) {
let timer = null
return function () {
console.log(this); // <button>点击</button>
if (timer) clearTimeout(timer)
timer = setTimeout(() => {
fn()
}, time)
}
}
btn.addEventListener('click', debounce(function () {
console.log(this); //window
console.log('我被点击了');
}, 1000))
</script>
</html>
2.优化this的指向
在基础版防抖函数中，在我们所写的防抖函数中this指向为我们所点击的标签，而在我们调用的时候this指向为window，有时候我们需要对原来的标签进行操作的话，此时我们需要改变this的指向来拿到原来的标签
<!DOCTYPE html>
<head>
<title>Document</title>
</head>
<body>
<button>点击</button>
</body>
<script>
let btn = document.querySelector('button')
function debounce(fn, time) {
let timer = null
return function () {
console.log(this); // <button>点击</button>
if (timer) clearTimeout(timer)
timer = setTimeout(() => {
fn.call(this, arguments)
}, time)
}
}
btn.addEventListener('click', debounce(function () {
console.log(this); // <button>点击</button>
console.log('我被点击了');
}, 1000))
</script>
</html>
3.优化立即执行效果（第一次立即执行）
<!DOCTYPE html>
<head>
<title>Document</title>
</head>
<body>
<button>点击</button>
</body>
<script>
let btn = document.querySelector('button')
function debounce(fn, time, immediate = false) {
let timer = null
let isImmediate = false
return function () {
if (timer) clearTimeout(timer)
if (immediate && !isImmediate) {
fn.call(this, arguments)
isImmediate = true
} else {
timer = setTimeout(() => {
fn.call(this, arguments)
isImmediate = false
}, time)
}
}
}
btn.addEventListener('click', debounce(function () {
console.log('我被点击了');
}, 1000,true))
</script>
</html>
二、节流函数
节流的应用场景：
- 监听页面的滚动事件；
- 鼠标移动事件；
- 用户频繁点击按钮操作；
- 鼠标不断点击触发，mousedown(单位时间内只触发一次)
- 监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断
**原理：**规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。
**大白话版原理：**小明答应在三天之后还钱给小红，在这三天内小明无论催小明多少次还钱或者是不催，小明都会在三天后还钱给小红
1.基础版防抖函数
<!DOCTYPE html>
<head>
<title>Document</title>
</head>
<body>
<button>点击</button>
</body>
<script>
let btn = document.querySelector('button')
function throttle(fn, time,first=true) {
let lastTime = 0
return function () {
const newTime = new Date().getTime()
const remainTime = time - (newTime - lastTime)
if (remainTime <= 0) {
fn.call(this, arguments)
lastTime = newTime
}
};
}
btn.addEventListener('click', throttle(function () {
console.log(this.innerHTML += 1);
}, 2000,true))
</script>
</html>