防抖和节流都是为了解决短时间内大量触发某函数而导致的性能问题,比如触发频率过高,导致响应速度跟不上触发频率,出现延迟,假死或卡顿的现象。但二者应对的业务需求不一样,所以实现的原理也不一样,下面具体来看看。
01 引入
首先举个例子,有这样一个需求:
当输入框内容发生改变的时候,响应处理函数
在没有加入防抖和节流的效果:
<body>
<input type="text" id="input">
<script>
function hello(arg){
console.log('hello ' + arg)
}
let input = document.getElementById('input')
input.addEventListener('keyup', function(e){
hello(e.target.value)
})
</script>
</body>
效果:当输入框里每输入一个,就会触发一次 hello()函数。