1、防抖
触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间
- 思路:每次触发事件时都取消之前的延时调用方法
function debounce(fn) {
let timeout = null; // 创建一个标记用来存放定时器的返回值
return function () {
clearTimeout(timeout); // 每当用户输入的时候把前一个 setTimeout clear 掉
timeout = setTimeout(() => { // 然后又创建一个新的 setTimeout, 这样就能保证输入字符后的 interval 间隔内如果还有字符输入的话,就不会执行 fn 函数
fn.apply(this, arguments);
}, 500);
};
}
function sayHi() {
console.log('防抖成功');
}
var inp = document.getElementById('inp');
inp.addEventListener('input', debounce(sayHi)); // 防抖
- eg:
//input 输入框中输出值,并且向服务端查询数据的时候,如果每次 input 值发生改变,都向服务器发请求的话,难免会资源浪费,并且用户体验并不好,那么我们可以在 input 输入值后延迟一段时间,再发请求。
<body>
<input type="text" id="text">
<script>
const text = document.getElementById('text')
text.oninput = debounce(search, 500)
function search() {
console.log('发起请求')
}
function debounce(fn, delay) {
let timer
return function (...args) {
if (timer) clearTimeout(timer)
timer = setTimeout(() => {
fn.apply(this, args)
}, delay)
}
}
</script>
</body>
//当 input 输入一个值的时候,间隔 500ms 才输出一个 发起请求, 如果我们连续输入, 只会输出一个 发起请求,这样看来防抖函数是成功了
- 原理其实涉及到了闭包:
- 1、当我们给 text 这个 input 绑定 oninput 事件时,我们给它绑定了 debounce 这个函数,传入真正执行业务逻辑的函数 fn, debounce 函数会返回一个新匿名函数,供 input 在 oninput 时调用
- 2、同时,我们用 闭包 留住了 timer这个定时器 id, 当我们 新的匿名函数调用时,发现当前 timer 定时器存在, 清除定时器,创建新的定时器,这样,当输入频繁时,就保证了,如果间隔时间小于我们设置的值,那么上一次函数一定不会调用,从而达到了降低调用频率的效果
2、节流
高频事件触发,但在n秒内只会执行一次,所以节流会稀释函数的执行频率,中间一段时间需要执行回调函数
- 思路:每次触发事件时都判断当前是否有等待执行的延时函数
function throttle(fn) {
let canRun = true; // 通过闭包保存一个标记
return function () {
if (!canRun) return; // 在函数开头判断标记是否为true,不为true则return
canRun = false; // 立即设置为false
setTimeout(() => { // 将外部传入的函数的执行放在setTimeout中
fn.apply(this, arguments);
// 最后在setTimeout执行完毕后再把标记设置为true(关键)表示可以执行下一次循环了。当定时器没有执行的时候标记永远是false,在开头被return掉
canRun = true;
}, 500);
};
}
function sayHi(e) {
console.log(e.target.innerWidth, e.target.innerHeight);
}
window.addEventListener('resize', throttle(sayHi));
- eg:
1、 利用定时器实现
<style>
#main {
width: 800px;
height: 100px;
background: red
}
</style>
</head>
<body>
<!-- 当我们的页面大于800的时候,什么都不做, 小于 800 的时候,我们的 main 区域要同步缩小 -->
<div id="main"> this is main </div>
<script>
function resize () {
const width = window.innerWidth
console.log(width)
if (width > 1000) return
document.getElementById('main').style.width = width + 'px'
}
function throttle(fn, delay) {
let isExecute = false
return function (...args) {
if (isExecute) return
isExecute = true
setTimeout(() => {
fn.apply(this, args)
isExecute = false
}, delay)
}
}
window.onresize = throttle(resize, 1000)
</script>
</body>
2、利用时间差实现
<script>
function resize () {
const width = window.innerWidth
console.log(width)
if (width > 1000) return
document.getElementById('main').style.width = width + 'px'
}
function throttle(fn, delay) {
let lastTime = new Date().getTime()
let currentTime
return function (...args) {
currentTime = new Date().getTime()
if (currentTime - lastTime < delay) return
lastTime = currentTime
fn.apply(this, args)
}
}
window.onresize = throttle(resize, 1000)
</script>
节流和防抖对比
· | 防抖 | 节流 |
---|---|---|
相同 | 都是限制回调函数调用频率 | |
不同 | 一段时间内,回调函数只会调用一次,即触发事件的最后一次 例如:在进行搜索的时候,当用户停止输入后调用方法,节约请求资源 | 一段时间内,会每隔一段时间调用一次,例如:打游戏的时候长按某个按键,动作是有规律的在间隔时间触发一次 |