近期面试遇到了这道题:1
2
3
4
5
6
7
8
9
10
//评测题目: throttle的简单实现
// throttle的简单实现
function throttle(func, duration) {
// 在这里编写具体实现
}
window.addEventListener('scroll', throttle(func, 50), false);
我:
第一反应是没听过这个,然后立刻网上搜相关信息,想起高程有讲过相关内容,立刻拿出红宝书出来镇场子。
throttle 和 debounce 的原理
先讲讲 throttle 的来源,俗称节流,一般用在滚动场景里,控制时间响应的次数。
高程里面讲函数节流背后的基本思想是指,某些代码不可以在没有间断的情况连续重复执行。第一次调用函数,创建一个定时器,在指定的时间间隔之后运行代码。当第二次调用该函数时,它会清除前一次的定时器并设置另一个。如果前一个定时器已经执行过了,这个操作就没有任何意义。目的是只有在执行函数的请求停止了一段时间之后才执行。
其实高程里面讲的节流原理是 debounce,实际的代码也是 debounce 的实现代码