欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

防抖&节流

程序员文章站 2022-05-25 09:57:41
使用的原因 在前端开发当中有一部分的用户行为会频繁操作触发事件执行,而对于DOM操作,资源加载等耗费性能的处理,很可能导致页面卡顿,甚至浏览器崩溃,函数节流和防抖就是解决类似需求应运而生的 节流 预定一个函数只有在大于等于执行周期时才执行,周期内调用不执行 ,就像水滴攒到一定重量会下落一样 运用场景 ......

使用的原因

在前端开发当中有一部分的用户行为会频繁操作触发事件执行,而对于dom操作,资源加载等耗费性能的处理,很可能导致页面卡顿,甚至浏览器崩溃,函数节流和防抖就是解决类似需求应运而生的

节流

预定一个函数只有在大于等于执行周期时才执行,周期内调用不执行,就像水滴攒到一定重量会下落一样

运用场景:

  • 窗口调整(resize)
  • 页面滚动(scroll)
  • 抢购疯狂点击(mousedown)
        let throttle =  (fn,waittime) => {
            let lasttime = 0;
            return function () {
                let nowtime = new date().gettime();
                if (nowtime - lasttime >= waittime) {
                    fn();//执行的时候注意this指向
                    lasttime = nowtime;
                }
            }
        }

防抖

函数防抖就是函数需要频繁触发情况时,只有足够的空闲时间,才执行一次。就像公交司机会等人都上车后才出站

运用场景

  • 实时搜索(keyup)
  • 拖拽(mousemove)
    let antishake = (fn,intervaltime) => {
        let timer = null;
        return function () {
            cleartimeout(timer);
            timer = settimeout(() => {
                fn()
            },intervaltime)
        }
    }