js防抖函数和节流函数使用场景和实现区别示例分

function debounce(fn, timeout){
  timeout = timeout || 1000;
  let timer;
  return () => {
    if(timer){ clearTimeout(timer)}
    timer = setTimeout(() => {
      fn()
    },timeout)
  }
}
 
function printEvent(){
  console.log('1121212')
}
 
window.addEventListener('scroll',debounce(printEvent,1000),false)

//节流函数
function throttle(fn, range){
  range = range || 1000;
  let timer;
  return () => {
    //console.log(111,typeof timer)
    if(!timer){
      timer = setTimeout( () => {
        fn()
        timer = null
      },range)
    }
  }
}
 
window.addEventListener('mousemove',throttle(printEvent,1000),false)

//节流函数 时间戳模式
var throttle2 = function(func, delay) {
　　var prev = Date.now();
　　return function() {
　　　　var context = this;
　　　　var args = arguments;
　　　　var now = Date.now();
　　　　if (now - prev >= delay) {
　　　　　　func.apply(context, args);
　　　　　　prev = Date.now();
　　　　}
　　}
}