防抖函数和节流函数都是用来提升性能优化及用户体验的一种方案;
防抖函数只会执行一次,且是最后触发的那一次,而节流函数会规律性的执行多次;
防抖
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
| function fun() { console.log('onresize'); }
function debounce(fn, delay) { var handle; return function () { clearTimeout(handle); handle = setTimeout(function () { fn() }, delay); } }
window.addEventListener('resize', debounce(fun, 500));
|
节流
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
| var canRun = true;
window.onresize = function () { if (!canRun) { return; } canRun = false; setTimeout(function () { console.log("函数节流"); canRun = true; }, 1000); }
|
使用场景
- 搜索框input事件,例如要支持输入实时搜索可以使用节流方案(间隔一段时间就必须查询相关内容),或者实现输入间隔大于某个值(如500ms),就当做用户输入完成,然后开始搜索,具体使用哪种方案要看业务需求。
- 页面resize事件,常见于需要做页面适配的时候。需要根据最终呈现的页面情况进行DOM渲染(这种情形一般是使用防抖,因为只需要判断最后一次的变化情况)