用js实现一个函数节流

节流

function debounce(func, delay) {
  let timer;
 // 通过闭包使timer一直存在内存中
  return function (...args) {
    if (timer) {
        clearTimeout(timer);    
  }
    timer = setTimeout(() => {
        func.apply(this, args); //通过apply还原this指向事件
    }, delay)
  }
}

// 点击元素1秒后执行,如果1秒内重复点击会清空之前定时,重新生成定时器!
document.querySelector('.demo').addEventListener('click',debounce((e)=>{
  // 需要执行的代码
  console.log(e);
},1000),false);    

防抖

function debounce(fn,wait){
    var timer = null;
    return function(){
        if(timer !== null){
            clearTimeout(timer);
        }
        timer = setTimeout(fn,wait);
    }
}
    
function handle(){
    console.log(Math.random());
}
    
window.addEventListener("resize",debounce(handle,1000));

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容