防抖动与节流
2019-03-13 本文已影响5人
aichisuan
自古人生一世，需有一技之长，
我辈既务斯业，便当专心用功，
以后名扬四海，根据全在年轻。——霸王别姬
combat.jpg
- 好友给我发了一张图，某些时候会发现自己不足，感觉什么都知道，但其实一直没有去归纳总结。最近会多写一些容易忘记的技术点。
概念
- 防抖：任务频繁触发的情况下，只有任务触发的间隔超过指定间隔的时候，任务才会执行。
- 节流：指定时间间隔内只会执行一次任务。
html代码
<body>
<button id="test">测试防抖和节流</button>
</body>
防抖动
<script>
window.onload = function () {
var btn = document.getElementById('test');
btn.addEventListener('click', antiShake(printF))
}
function antiShake(fn) {
var timeout = null;
return function () {
clearTimeout(timeout);
timeout = setTimeout(function () {
fn.apply(this, Array.from(arguments));
}, 1000)
}
}
function printF() {
console.log('防抖动了吗？')
}
</script>
节流
window.onload = function () {
var btn = document.getElementById('test');
btn.addEventListener('click', throttle(printF))
}
function throttle(fn) {
var flag = true;
return function () {
if(!flag){
return;
}
flag = false
setTimeout(function() {
// fn();
fn.apply(this, Array.from(arguments));
flag = true;
}, 1000)
}
}
function printF() {
console.log('节流了吗？')
}
使用场景
- 防抖动
- 输入框搜索产生联想词。
- 节流
- 懒加载要监听计算滚动条的位置，使用节流按一定时间的频率获取。
- 用户点击提交按钮，假设我们知道接口大致的返回时间的情况下，我们使用节流，只允许一定时间内点击一次。
- 比如在页面的无限加载场景下，我们需要用户在滚动页面时，每隔一段时间发一次 Ajax 请求，而不是在用户停下滚动页面操作时才去请求数据。这样的场景，就适合用节流技术来实现。
