当我们按下一个按钮触发了事件的时候,为了减少不必要的错误,希望这个按钮上的业务执行完毕再能再次被点击,函数截流就是 ,阻止业务期间又触发的事件
第一种函数截流方法
var lock =true; oDiv.onclick = function() { if(!lock) return; lock = false; setTimeout(function(){ lock = true; },3000) }
第二种函数截流方法
<input type="text" id="search"> <script> function throttle(fn, delay, context) {// fn 是要执行的函数 delay 是延时 context 是指调用函数中this是谁,可选 context = context || null; clearInterval(fn.timeoutId); fn.timeoutId = setTimeout(() => { fn.call(context); }, delay); } function queryData() { console.log('搜索' + this.value); } var oInput = document.querySelector('#search') oInput.onkeyup = function() { throttle(queryData, 500, this); }
<script>