防抖
事件触发后n秒内只执行一次，如果n秒内再次触发，重新计时
html:
<input id="input" type="text"/>
<div style="height: 1000px;"></div>
- 非立即触发
let inputCon = document.getElementById('input');
function inputRes() {
console.log(inputCon.value)
}
function handle() {
console.log(window.scrollY)
}
function debounce(fn, deplay) {
let timer = null
return function() {
if (timer) clearTimeout(timer);
timer = setTimeout(() => {
fn.apply(this, arguments)
}, deplay);
}
}
inputCon.addEventListener("input", throttle(inputRes,1000));
window.addEventListener('scroll', debounce(handle,500));
事件触发n秒后，函数才会执行，如果在事件的n秒内，再次滚动，就会重新计算时间。
- 立即触发
let inputCon = document.getElementById('input');
function inputRes() {
console.log(inputCon.value)
}
function handle() {
console.log(window.scrollY)
}
function debounce(fn, deplay) {
let timer = null
return function() {
if (timer) {
clearTimeout(timer);
} else {
fn.apply(context, args)
}
timer = setTimeout(() => {
timer = null
}, deplay);
}
}
inputCon.addEventListener("input", throttle(inputRes,1000));
window.addEventListener('scroll', debounce(handle,500));
事件触发后函数立即执行，在n秒内不继续触发该事件才会再执行函数。
节流
n秒内只触发一次
- 时间戳实现
let inputCon = document.getElementById('input');
function inputRes() {
console.log(inputCon.value)
}
function handle() {
console.log(window.scrollY)
}
function throttle(fn, deplay) {
let old = 0;
return function() {
let now = new Date();
if (now - old > deplay) {
fn.apply(this, arguments)
old = now;
}
}
}
inputCon.addEventListener("input", throttle(inputRes,1000));
window.addEventListener('scroll', throttle(handle,500));
触发事件，函数立即执行，每隔n秒执行一次。
- 定时器实现
let inputCon = document.getElementById('input');
function inputRes() {
console.log(inputCon.value)
}
function handle() {
console.log(window.scrollY)
}
function throttle(fn, deplay) {
let timer = null
return function() {
if (timer) return; // 注意是return
timer = setTimeout(() => {
timer = null
fn.apply(this, arguments)
}, deplay);
}
}
inputCon.addEventListener("input", throttle(inputRes,1000));
window.addEventListener('scroll', throttle(handle,500));
触发事件，触发时间段结束后执行函数，每隔n秒执行一次。
开发适用场景
1.输入框输入完成后搜索，建议使用非立即执行防抖，等待输入完成后，再去搜索。
2.按钮提交，建议非立即执行防抖，只提交最后一次。
（...待补充）
