函数防抖
JS防抖的基本思路是：规定一个期限时间，在首次触发事件时，不立即执行回调函数，而是在期限时间后再执行，如果期限时间内回调函数被重复执行，则期限时间重新计时。
防抖的应用场景
（1）用户在输入框中输入一串字符，只会在最后一次输入完成后再去执行查询ajax请求，这样可以有效减少请求的次数，节约请求资源。
（2）window的scroll、resize事件，不断地滚动、或调整浏览器窗口大小时触发的对应事件，可以允许其只触发一次
/*
*fn --> 需要防抖的函数；
*delaytime --> 毫秒数，防抖所需期限值；
*/
function debounce(fn,delaytime){
let timer = null
return function(){
if(timer){
clearTimeout(timer) //进入这里说明当前存在一个执行过程，并且同时又执行了一个相同事件，故取消当前的执行过程
}
timer = setTimeout(fn,delaytime)
}
}
function show_scrollPosition(){
var scrollPosition = document.body.scrollTop || document.documentElement.scrollTop;
console.log("当前滚动条位置为：",scrollPosition);
}
window.onscroll = debounce(show_scrollPosition,1000)
函数节流
JS中节流的基本思路是：规定一个期限时间，在该时间内，触发事件的回调函数只能执行一次，如果期限时间内回调函数被多次触发，则只有一次能生效。
节流的道理其实就是让函数执行一次后，在某个时间段内暂时失效，过了这个时间段后再重新激活。
节流的应用场景
（1）在页面无限加载的情况下，需要用户再滚动页面时，每隔一定时间发起一次ajax请求，而不是再用户停下滚动时再去请求数据；
（2）监听滚动事件，比如是否滑倒底部自动加载更多，则用节流来判断；
function throttle(fn, delay) {
let last_time
let timer = null
return function () {
let cur_time = new Date().getTime()
if (last_time && cur_time < last_time + delay) { //若为真，则表示上次执行过，且在期限值范围内
clearTimeout(timer)
timer = setTimeout(() => {
fn();
last_time = cur_time
}, delay)
} else {
last_time = cur_time;
fn();
}
}
}
function show_scrollPosition() {
var scrollPosition = document.body.scrollTop || document.documentElement.scrollTop;
console.log("当前滚动条位置为：", scrollPosition);
}
window.onscroll = throttle(show_scrollPosition, 1000)
