js 防抖 和 节流
<div style='height:9999px;'></div>
<script type="text/javascript">
//------------------------------------ 防抖
function debounce(func, wait=0) {
if (typeof func !== 'function') {
throw new TypeError('need a function arguments')
}
let timeid = null;
let result;
console.log("start"); //只执行一次
return function() { //之后执行下面
clearTimeout(timeid);
timeid = setTimeout(function() {
result = func.apply(this, arguments);
}, wait);
return result;
}
}
// 处理函数
function handle() {
console.log(arguments);
}
// 滚动事件
window.addEventListener('scroll', debounce(handle, 1000));
</script>
<script>
//------------------------------------ 节流
//时间戳版本
//使用时间戳的节流函数会在第一次触发事件时立即执行，以后每过 delay 秒之后才执行一次，并且最后一次触发事件不会被执行
var throttle = function(func, delay){
var prev = Date.now();
return function(){
var now = Date.now();
if(now-prev>=delay){
func.apply(this,arguments);
prev = Date.now();
}
}
}
//定时器方式：
//使用定时器的节流函数在第一次触发时不会执行，而是在 delay 秒之后才执行，当最后一次停止触发后，还会再执行一次函数
var throttle = function(func, delay){
var timer = null;
return function(){
if(!timer){
timer = setTimeout(function(){
func.apply(this, arguments);
timer = null;
},delay);
}
}
}
//应用场景
// 1、防抖（debounce）
// 1）每次 resize/scroll 触发统计事件
// 2）文本输入的验证，连续输入文字后发送 AJAX 请求进行验证，验证一次就好。
// 2、节流（throttle）
// 1）DOM 元素的拖拽功能实现（mousemove）
// 2）搜索联想（keyup）
// 3）计算鼠标移动的距离（mousemove）
// 4）Canvas 模拟画板功能（mousemove）
// 5）射击游戏的 mousedown/keydown 事件（单位时间只能发射一颗子弹）
// 6）监听滚动事件判断是否到页面底部自动加载更多
//总结
//函数防抖：将几次操作合并为一次操作进行。原理是维护一个计时器，规定在delay时间后触发函数，但是在delay时间内再次触发的话，就会取消之前的计时器而重新设置。这样一来，只有最后一次操作能被触发。
//函数节流：使得一定时间内只触发一次函数。原理是通过判断是否到达一定时间来触发函数。
</script>
