手写实现防抖&节流
使用目的：
解决当函数在某些场景下被无限制的频繁调用，会增加浏览器的负担，会造成卡顿的现象
使用场景：
鼠标滚动、键盘输入操作、窗口resize等等
原理：
防抖：事件持续触发时，如果间隔时间小于预设的时间，不会执行函数，同时以最后触发事件的时间为准重新计时。总之，一定要在事件触发完的预设时间内没有触发过，才会执行函数
手写+逐步完善
第一个实现版本（注意执行上下文）
function _debounce(func, wait){
// 定义一个计时器
var timer
return function(){
// 拿到当前的执行上下文
var context = this
clearTimeout(timer)
timer = setTimeout(function(){
// 因为setTimeout回调方法中this永远是window，所以~
func.apply(context)
},wait)
}
}以上实现方式有一个不足，就是当事件处理函数传入参数（event对象）时，没有做到获取，修改一下：
第二个实现版本（注意处理传参）
function _debounce(func, wait){
var timer
return function(){
var context = this
// 通过arguments拿到调用时所传入的参数
var arg = arguments
clearTimeout(timer)
timer = setTimeout(function(){
// 执行时传入参数
func.apply(context, arg)
},wait)
}
}此时还有一个问题，最开始函数必须要在事件初次触发后，等待wait之后才会执行，我们想要用一次立即执行来兜底初次触发：
第三个实现版本（处理初始立即执行）
function _debounce(func, wait, immediate){
var timer
return function(){
var context = this
var arg = arguments
if(timer) clearTimeout(timer)
if(immediate){
/** timer为true，callNow为false期间
* 都代表不是初次触发
* timer初始布尔值为false
* 初次执行之后timer在wait时间内一直为true
**/
var callNow = !timer
// 这一句在执行完之前 timer都为true
timer = setTimeout(function(){
timer = null
},wait)
if(callNow) func.apply(context,arg)
}else{
timer = setTimeout(function(){
func.apply(context, arg)
},wait)
}
}
}
// 中心思想就是有一个标识，用来标记当前是否为初次触发，用以判断是否需要执行，而在执行后wait时间后将标识变为初始状态**特别版本：防抖函数有可能会造成一直不触发的现象
function throttle(fn, delay){
/*last为上一次触发回调的时间, timer是定时器*/
var last = 0, timer = null
return function () {
let context = this
let args = arguments
let now = +new Date()
/*判断上次触发的时间和本次触发的时间差是否小于时间间隔的阈值*/
if (now - last < delay) {
/* 如果时间间隔小于我们设定的时间间隔阈值，
* 则为本次触发操作设立一个新的定时器
* 其实这里就是原本正常的防抖逻辑
*/
clearTimeout(timer)
timer = setTimeout(function () {
last = now
fn.apply(context, args)
}, delay)
} else {
/* 如果时间间隔超出了我们设定的时间间隔阈值，那就不等了，无论如何要反馈给用户一次响应*/
last = now
fn.apply(context, args)
}
}
}还可以有一些优化，比如有返回值时等等，暂时到这里 最好能记牢
节流：事件持续触发期间，每间隔预设的时间才会执行一次
手写+逐步完善（定时器 or 时间戳）
1、时间戳版本
function _throttle(func, wait){
var timer = 0
return function(){
var arg = arguments
var now = new Date()
if(now - timer >= wait){
func.apply(this,arg)
timer = now
}
}
}
/** 这里懵逼了，理解一下应该是将throttle执行后的结果，
* 也就是闭包函数赋值给了container的mousemove
* 之后每次mousemove执行的都是闭包函数
**/
container.onmousemove = throttle(xxx,1000)2、定时器版本
function _throttle(func,wait){
var timer
return function(){
var arg = arguments
if(!timer){
timer = setTimeout(function(){
timer = null
func.apply(this,arg)
},wait)
}
}
}以上两种实现方式，时间戳版本会立即执行，但不会有最后一一次执行；定时器版本不会立即执行，但会有最后一次操作执行兜底
最好是将这两种情况合二为一，更加优秀
3、取长补短版本：
function throttle(func, wait) {
var timeout, context, args, result;
var previous = 0;
var later = function() {
previous = +new Date();
timeout = null;
func.apply(context, args)
};
var throttled = function() {
var now = +new Date();
//下次触发 func 剩余的时间
var remaining = wait - (now - previous);
context = this;
args = arguments;
// 如果没有剩余的时间了或者你改了系统时间
if (remaining <= 0 || remaining > wait) {
// 对于时间戳计算，要执行的时候如果还有计时器捣乱 要清掉
if (timeout) {
clearTimeout(timeout);
timeout = null;
}
previous = now;
func.apply(context, args);
} else if (!timeout) {
// 如果时间戳还没有到执行，定时器到了（没有定时器代表要执行了），那就在剩余时间后执行，兜最后一次
timeout = setTimeout(later, remaining);
}
};
return throttled;
}
// 这个难 暂时先理解吧 本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！