防抖（debounce）
所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。
防抖函数分为非立即执行版和立即执行版。
非立即执行版：
第一种
function debounce (fn, delay) {
let timer = null
return function (...args) {
timer && clearTimeout(timer)
timer = setTimeout(() => {
fn.apply(this, args)
}, delay)
}
}
第二种
function debounce(fn,delay){
var timer = null
return function(){
var ctx = this;
var args = arguments;
timer && clearTimeout(timer)
timer = setTimeout(function(){
fn.apply(ctx,args)
},delay)
}
}
立即执行
立即执行就是事件触发后立即执行，然后超过一段时间没有触发事件，执行函数才会被触发执行；
function(fn,delay){
var timer = null;
return function(){
var ctx = this;
var args = arguments;
timer && clearTimeout(timer);
var immediate = !timer
if(immediate){
fn.apply(ctx,args)
}
timer = setTimeout(function(){
timer = null;
},delay)
}
}
两种合并
/**
* fn 执行函数
* delay 延迟时间
* immediate 是否立即执行 true：立即执行，false:非立即执行
* */
function debounce(fn,delay,immediate){
var timer =null;
return function(){
var ctx = this,
args = arguments;
timer&&clearTimeout(timer)
if(immediate){
var immediate = !timer;
immediate && fn.apply(ctx,args)；
timer = setTimeout(()=>{
timer=null
},delay)
}else{
timer=setTimeout(()=>{
fn.apply(ctx,args);
},delay)
}
}
}
节流
所谓节流就是在连续触发事件过程中，程序会稀释执行的次数，程序会在规定时间内ns内只执行一次
节流 一般有两种方式：时间戳和定时器
第一种时间戳
function throttle(fn,delay){
var previous = new Date().getTime();
return function(){
var ctx = this,
args = arguments,
now = new Date().getTime();
if(now-previous>delay){
fn.apply(ctx,args);
previous = new Date().getTime();
}
}
}
第二种定时器
function throttle(fn,delay){
var timer = null;
return function(){
var ctx = this,
args = arguments;
if(!timer){
timer= setTimeout(function(){
fn.apply(ctx,args);
timer=null;
},delay)
}
}
}