防抖函数的实现
防抖函數的定義是當事件觸發完成之后再延遲觸發,并且只觸發一次;如果在觸發完成之前再次觸發,則會再次刷新延遲;簡單理解為(如果事件不觸發即不執行,并且只會執行一次,就是定時器最后走的那一次)
? 舉個例子:假如有個彈簧,你一直往下按壓只要你不松手就是不會彈出的,彈簧只有在你松手的那一瞬間才會彈出去;防抖函數也是如此,只要事情觸發沒有結束是不會執行的,只有在事件觸發結束后延遲執行一次;
//定義方法即要做的事情 function fun(){console.log('onresize')} //定義事件觸發要執行的方法,兩個參數分別是傳入的要做的事情和定時器的毫秒數 function debounce(fn,delay){//定義一個變量作為等會清除對象var handle;//這里用到了閉包,一個函數里面return另一個函數,變量相互簽引導致垃圾回收機制不會銷毀handle變量return function(){//在這里一定要清除前面的定時器,然后創建一個新的定時器clearTimeout(handle) //最后這個定時器只會執行一次也就是事件觸發完成之后延遲500毫秒再觸發(這里的變量賦值是跟定時器建立連接,進行地址賦值,一定要重新賦值給handle handle=setTimeout(function(){fn()},delay)}} //給瀏覽器添加監聽事件resize window.addEventListener('resize', debounce(fun, 500));?防抖函數只會執行一次,且是最后觸發的那一次
總結
- 上一篇: new操作符具体都干了什么?一次笔试题遇
- 下一篇: 节流函数的实现,一次面试题遇到的编程题