web前端面试题@七（函数防抖和函数节流）

一、函数节流

（1）定义：一个函数执行一次后，只有大于设定的执行周期后才会执行第二次

（2）原理：用时间戳来判断是否已到回调该执行时间，记录上次执行的时间戳，然后每次触发 scroll 事件执行回调，回调中判断当前时间戳距离上次执行时间戳的间隔是否已经到达 规定时间段，如果是，则执行，并更新上次执行的时间戳，这样循环下去

web前端面试题@七（函数防抖和函数节流）

二、函数防抖

（1）定义：一个需要频繁触发的函数，在规定时间内，只让最后一次执行，前面的不执行

（2）原理：第一次调用函数，创建一个定时器，在指定的时间间隔之后运行代码。当第二次调用该函数时，它会清除前一次的定时器并设置另一个。如果前一个定时器已经执行过了，这个操作就没有任何意义。然而，如果前一个定时器尚未执行，其实就是将其替换为一个新的定时器，然后延迟一定时间再执行

web前端面试题@七（函数防抖和函数节流）

三、应用

函数节流和函数去抖的核心其实就是限制某一个方法被频繁触发，比如说DOM事件的监听回调，input的keyup、keydown，window.scroll,window.resize事件，按钮连续变态点击导致无限制发送接口请求等应用场景