当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 防抖&节流

防抖&节流

2019年09月14日  | 移动技术网IT编程  | 我要评论

使用的原因

在前端开发当中有一部分的用户行为会频繁操作触发事件执行，而对于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)
        }
    }

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网