防抖（debounce）
1. 什么是防抖
在时间被触发n秒后再执行回调函数，若在这n秒中又被触发，则重新计时n秒。
2. 使用场景
2.1 用户在输入框中连续输入一串字符后，只会在输入完后去执行最后一次的查询ajax请求，这样可以有效减少请求次数，节约请求资源；
2.2 window的resize、scroll事件，不断地调整浏览器的窗口大小、或者滚动时会触发对应事件，防抖让其只触发一次；
3.原理
防抖是维护一个计时器，规定在delay时间后触发函数，但是在delay时间内再次触发的话，都会清除当前的 timer 然后重新设置超时调用，即重新计时。这样一来，只有最后一次操作能被触发
4. 实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>防抖实现</title>
</head>
<body>
<!-- 防抖：在事件被触发n秒后再执行回调函数，如果在这n秒内又被触发，则重新计时。-->
<input type="text" name="debounce" id="debounce">
</body>
<script>
// 防抖
window.onload = function() {
//模拟ajax请求
function ajax(content) {
console.log('ajax request ' + content)
}
function debounce(fun, delay) {
return function(args) {
//获取函数的作用域和变量
let that = this
let _args = args
//每次事件被触发，都会清除当前的timeer，然后重写设置超时调用
clearTimeout(fun.id)
console.log(11, fun.id)
fun.id = setTimeout(function() {
fun.call(that, _args)
}, delay)
}
}
let inputEle = document.getElementById('debounce')
let debounceAjax = debounce(ajax, 1000)
inputEle.addEventListener('keyup', function(e) {
debounceAjax(e.target.value)
})
}
</script>
</html>
代码说明：
1.每一次事件被触发，都会清除当前的 timer 然后重新设置超时调用，即重新计时。 这就会导致每一次高频事件都会取消前一次的超时调用，导致事件处理程序不能被触发；
2.只有当高频事件停止，最后一次事件触发的超时调用才能在delay时间后执行；
节流
1. 什么是节流
所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数，节约流量。
节流会稀释函数的执行频率。
对于节流，一般有两种方式可以实现，分别是时间戳版和定时器版。
规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。
2. 使用场景
2.1 鼠标连续不断地触发某事件（如点击），只在单位时间内只触发一次；
2.2 在页面的无限加载场景下，需要用户在滚动页面时，每隔一段时间发一次 ajax 请求，而不是在用户停下滚动页面操作时才去请求数据；
2.3 监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断；
3. 原理
每次触发事件时都判断当前是否有等待执行的延时函数
4. 实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>防抖实现</title>
</head>
<body>
<!-- 节流：规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效 -->
<input type="text" name="throttle" id="throttle">
</body>
<script>
// 节流
window.onload = function() {
//模拟ajax请求
function ajax(content) {
console.log('ajax request ' + content)
}
function throttle(fun, delay) {
let last, deferTimer
return function(args) {
let that = this;
let _args = arguments;
let now = +new Date();
if (last && now < last + delay) {
clearTimeout(deferTimer);
deferTimer = setTimeout(function() {
last = now;
fun.apply(that, _args);
}, delay)
} else {
last = now;
fun.apply(that, _args);
}
}
}
let throttleAjax = throttle(ajax, 1000)
let inputEle = document.getElementById('throttle')
inputEle.addEventListener('keyup', function(e) {
throttleAjax(e.target.value)
})
}
</script>
</html>
