函數防抖節流問題
阿新 • • 發佈:2019-04-18
false imm argument dev 立即執行 之間 listener media 都是
1.函數防抖和函數節流都是防止某一時間頻繁觸發,但是這兩兄弟之間的原理卻不一樣
2.函數防抖是某一段時間內只執行一次(如5秒內只執行一次,多次觸發重新計時),而函數節流是間隔時間執行(每多少秒內執行一次,無論觸發多少次,按照固定頻率執行)
【函數防抖】在事件被觸發n秒後再執行回調,如果在這n秒內又被觸發,則重新計時。
【函數節流】規定在一個單位時間內,只能觸發一次函數。如果這個單位時間內觸發多次函數,只有一次生效。
/** * @desc 函數防抖 * @param func 函數 * @param wait 延遲執行毫秒數 * @param immediate true 表立即執行,false 表非立即執行 */ function debounce(func,wait,immediate) { let timeout; return function () { let context = this; let args = arguments; if (timeout) clearTimeout(timeout); if (immediate) { let callNow = !timeout; timeout = setTimeout(() => { timeout = null; }, wait) if (callNow) func.apply(context, args) } else { timeout = setTimeout(() => { func.apply(context, args) }, wait); } } }
window.onload = function () { // 函數防抖 var timer var tar = document.getElementsByTagName("input")[0]; tar.addEventListener("keyup", function(e){ let value = e.target.value console.log(timer) if(timer) clearTimeout(timer) timer = setTimeout(() => { console.log({value}) }, 2000); }) }
window.onload = function () { // 函數節流 var timer = null var tar = document.getElementsByTagName("input")[0]; tar.addEventListener("keyup", function(e){ var value = e.target.value if(!timer){ timer = setTimeout(() => { timer = null clearTimeout(timer) console.log({value}) },2000) } }) }
/** * @desc 函數節流 * @param func 函數 * @param wait 延遲執行毫秒數 * @param type 1 表時間戳版,2 表定時器版 */ function throttle(func, wait ,type) { if(type===1){ let previous = 0; }else if(type===2){ let timeout; } return function() { let context = this; let args = arguments; if(type===1){ let now = Date.now(); if (now - previous > wait) { func.apply(context, args); previous = now; } }else if(type===2){ if (!timeout) { timeout = setTimeout(() => { timeout = null; func.apply(context, args) }, wait) } } } }
函數防抖節流問題