节流（throttle）
所谓节流，就是指连续触发事件，但事件触发后，在规定的时间内，该事件不会连续调用。也就是说在规定事件内，该事件只会执行一次，且是最先被触发的那一次。节流会减少事件的执行频率
节流使用场景
1.滚动加载更多
2.搜索框搜索
3.表单重复提交......
节流案例展示
1.可以看到在页面持续滚动事件中，函数不会立即执行，而是每隔1秒执行一次，在停止触发事件后，函数还会执行一次
function thorottle(fn, delay) {
let endTimer = 0;
return function() {
let startTimer = Date.now()
if (startTimer - endTimer > delay) {
fn.call(this)
endTimer = startTimer
}
}
}
document.onscroll = thorottle(function() {
console.log('scroll事件触发了' + Date.now());
}, 1000)//时间戳触发
function thorottle(fn, delay) {
let endTimer = 0;
return function() {
if (!endTimer ) {
endTimer = setTimeout(() => {
endTimer = null
fn.apply(this)
}, delay)
}
}
}
document.onscroll = thorottle(function() {
console.log('scroll事件触发了' + Date.now());
}, 200)//定时器触发
防抖（debounce）
所谓防抖，就是指多次触发事件，该事件只会执行一次，并且是该事件触发结束后执行。也就是说，该函数被多次触发准备执行前，会等待一定时间（该时间自己定义），如果没有被再次触发后，该函数执行，如果在规定时间再次触发，该函数执行被作废，需从再次触发的时间点计算，等待时间过后，执行该函数
防抖使用场景
1.表单验证
2.搜索框搜索
3.窗口大小变化后，重新渲染......
防抖案例展示
1.可以按钮在被持续点击时，事件是不会被执行的，当点击事件停止后，函数被执行
function debounce(fn, delay) {
var timer = null
return function() {
clearTimeout(timer)
timer = setTimeout(function() {
fn.apply(this)
}, delay)
}
}
document.getElementById('btn').onclick = debounce(function() {
console.log('按钮被点击了' + Date.now());
}, 1000)//非立即执行版
function debounce(fn, delay) {
var timer = null
return function() {
clearTimeout(timer)
let nowTime = !timer
timer = setTimeout(function() {
timer = null
}, delay)
if (nowTime) {
fn.apply(this)
}
}
}
document.getElementById('btn').onclick = debounce(function() {
console.log('按钮被点击了' + Date.now());
}, 1000)//立即执行版，只要触发事件，就执行函数，但在规定时间内只触发一次
END
