這篇文章主要給大家匯總介紹了javascript最基本的7個函數,十分的實用,有需要的小伙伴可以參考下。
我記得早期的 JavaScript ,要完成任何事情幾乎都繞不開一些簡單的函數,因為瀏覽器提供商實現功能有所差異,而且不只是邊緣功能,基礎功能也一樣,如 addEventListener 和 attachEvent。雖然時代變了,但仍有一些函數是每個開發者都應該掌握的,以便于完成某些功能和提高性能。
debounce
對于高耗能事件,debounce 函數是一種不錯解決方案。如果你不對 scroll、resize、和 key* 事件使用 debounce 函數,那么你幾乎等同于犯了錯誤。下面的 debounce 函數能讓你的代碼保持高效:
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 // 返回一個函數,如果它被不間斷地調用,它將不會得到執行。該函數在停止調用 N 毫秒后,再次調用它才會得到執行。如果有傳遞 ‘immediate' 參數,會馬上將函數安排到執行隊列中,而不會延遲。 function debounce(func, wait, immediate) { var timeout; return function() { var context = this, args = arguments; var later = function() { timeout = null; if (!immediate) func.apply(context, args); }; var callNow = immediate && !timeout; clearTimeout(timeout); timeout = setTimeout(later, wait); if (callNow) func.apply(context, args); }; }; // 用法 var myEfficientFn = debounce(function() { // 所有繁重的操作 }, 250); window.addEventListener('resize', myEfficientFn);debounce 函數不允許回調函數在指定時間內執行多于一次。當為一個會頻繁觸發的事件分配一個回調函數時,該函數顯得尤為重要。
poll
盡管上面我提及了 debounce 函數,但如果事件不存在時,你就不能插入一個事件以判斷所需的狀態,那么就需要每隔一段時間去檢查狀態是否達到你的要求。
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 function poll(fn, callback, errback, timeout, interval) { var endTime = Number(new Date()) + (timeout || 2000); interval = interval || 100; (function p() { // 如果條件滿足,則執行! if(fn()) { callback(); } // 如果條件不滿足,但并未超時,再來一次 else if (Number(new Date()) < endTime) { setTimeout(p, interval); } // 不匹配且時間消耗過長,則拒絕! else { errback(new Error('timed out for ' + fn + ': ' + arguments)); } })(); } // 用法:確保元素可見 poll( function() { return document.getElementById('lightbox').offsetWidth > 0; }, function() { // 執行,成功的回調函數 }, function() { // 錯誤,失敗的回調函數 } );新聞熱點
疑難解答