防抖&节流
程序员文章站
2023-04-02 10:56:03
使用的原因 在前端开发当中有一部分的用户行为会频繁操作触发事件执行,而对于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) } }