防抖(debounce):
防抖触发高频率事件时n秒后只会执行一次,如果n秒内再次触发,则会重新计算。
简单概括:每次触发时都会取消之前的延时调用。
节流(thorttle):
高频事件触发,每次触发事件时设置一个延迟调用方法,并且取消之前延时调用的方法。
简单概括:每次触发事件时都会判断是否等待执行的延时函数。
区别:两者区别在于函数节流是固定时间做某一件事,比如每隔1秒发一次请求。而函数防抖是在频繁触发后,只执行一次(两者的前提都是频繁触发
场景:
(1)节流:一般是onrize,onscroll等这些频繁触发的函数,比如你想获取滚动条的位置,然后执行下一步动作;鼠标不断点击触发,mousedown(单位时间内只触发一次)…
比如你想获取滚动条的位置,然后执行下一步动作。如果监听后执行的是Dom操作,这样的频繁触发执行,可能会影响到浏览器性能,甚至会将浏览器卡崩。 我们可以规定他多少秒执行一次,这种方法叫函数节流 const throttle=(fn, delay) => { //记录上一次函数触发的时间 let lastTime = 0; return () => { //记录当前函数触发的时间 let nowTime = Date.now(); if (nowTime - lastTime > delay) { fn(); //同步时间 lastTime = nowTime; } } };
2)防抖:频繁操作点赞和取消点赞,因此需要获取最后一次操作结果并发送给服务器;search搜索联想,用户在不断输入值时…
const debounce=(fn, delay) => { //记录上一次的延时器 let timer = null; return () => { //清除上一次延时器 clearTimeout(timer); //重新设置新的延时器 timer = setTimeout(() => { fn() }, delay) } };
区别:
区别:降低回调执行频率,节省计算资源。
防抖和节流本质是不一样的。防抖是将多次执行变为最后一次执行,节流是将多次执行变成每隔一段事件执行
函数防抖一定连续触发的事件,只在最后执行一次,而函数节流一段时间内只执行
面试题49:什么是防抖和节流
于 2022-06-19 10:49:53 首次发布