js实现防抖debounce和节流throttle

多次触发事件,但是只在触发停止后一段时间内才触发一次,叫做 防抖; 每隔一段时间触发一次叫节流
举例:
在搜索框中输入,在输入停止200ms后执行搜索叫防抖;在输入过程中每隔2秒执行一次搜索叫做节流。是不是很好理解了~
实现代码:

// 防抖
function debounce(fn, time){
    let timer = null;
    return function(){ 发布文章
        if(timer){
            clearTimeout(timer);
        }
        timer = setTimeout(fn, time);
    }
}
window.addEventListener('resize', debounce(() => {console.log('resize')}, 1000));
//节流
function throttle(fn, interval){
    let pre = new Date().valueOf();
    return function() {
        const cur = new Date().valueOf();
        if(cur - pre >= interval){
            pre = cur;
                        const args = Array.prototype.slice.call(arguments);
            fn.apply(this, args);
        }
    }
}
window.onresize = throttle(() => console.log('resize'), 2000);
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一.什么是函数防抖&节流 函数防抖函数防抖(debounce):在事件被触发n秒后再执行回调,如果在这n秒内又被触...
    王蕾_fd49阅读 462评论 0 1
  • 这两个概念有时候傻傻分不清,但实际工作中,相信只要需求足够清楚后,大家也都能实现这种逻辑控制,只是不知道这些术语罢...
    晓风残月1994阅读 852评论 0 0
  • JavaScript 函数防抖和函数节流. 在浏览器执行环境中,等待主队列任务(DOM TREE & CSS Tr...
    人话博客阅读 1,099评论 0 49
  • 本人嗜小笼,因而被朋友谑称为“小笼女”。 记得小时候祖父母每周必领着去的地方就是城隍庙的南翔馒头店,那是很久很久以...
    建文见闻阅读 362评论 0 0
  • 先来看看几张儿童人物摄影: 这几个少年儿童看起来都非常美丽可爱,这几张照片也的确中规中矩。但是,我们不难发现千篇一...
    上官飞鸿阅读 1,206评论 23 31