摘要:只有別人沒刷卡了,司機才開車。應用場景搜索輸入框監(jiān)聽和事件,請求次數(shù)過于平凡會增加服務器壓力。可以讓用戶內不在輸入內容,才向服務器發(fā)起請求。觸發(fā)的時候,不斷的調整瀏覽器窗口大小會不斷的觸發(fā)這個事件,用防抖來讓其只觸發(fā)一次函數(shù)方法調用
概念解讀:
在頻繁觸發(fā)的情況下,只有足夠的空閑時間,才執(zhí)行代碼一次。
生活例子:坐公交,就是一定時間內,如果有人陸續(xù)刷卡上車,司機就不會開車。只有別人沒刷卡了,司機才開車。
1、搜索輸入框(監(jiān)聽keyup和keydown事件,請求次數(shù)過于平凡會增加服務器壓力。可以讓用戶1s內不在輸入內容,才向服務器發(fā)起請求。)
2、window觸發(fā)resize的時候,不斷的調整瀏覽器窗口大小會不斷的觸發(fā)這個事件,用防抖來讓其只觸發(fā)一次
函數(shù)方法function debounce(func, wait) { let timeout = null return function() { clearTimeout(timeout) timeout = setTimeout(() => { func.apply(this, arguments) }, wait) } } //調用 function getData() { ... // ajax } documentElement.addEventListener("keyup", debounce(getData, 1000));
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/109002.html
摘要:若時間差大于間隔時間,則立刻執(zhí)行一次函數(shù)。不同點函數(shù)防抖,在一段連續(xù)操作結束后,處理回調,利用和實現(xiàn)。函數(shù)防抖關注一定時間連續(xù)觸發(fā)的事件只在最后執(zhí)行一次,而函數(shù)節(jié)流側重于一段時間內只執(zhí)行一次。 原博客地址,歡迎star 函數(shù)防抖和節(jié)流 函數(shù)防抖和函數(shù)節(jié)流:優(yōu)化高頻率執(zhí)行js代碼的一種手段,js中的一些事件如瀏覽器的resize、scroll,鼠標的mousemove、mouseover...
摘要:函數(shù)防抖的要點,是需要一個來輔助實現(xiàn),延遲運行需要執(zhí)行的代碼。若計時期間事件沒有被重新觸發(fā),等延遲時間計時完畢,則執(zhí)行目標代碼。而非立即執(zhí)行版指的是觸發(fā)事件后函數(shù)會立即執(zhí)行,然后秒內不觸發(fā)事件才能繼續(xù)執(zhí)行函數(shù)的效果。。 JS中的函數(shù)防抖 一、什么是函數(shù)防抖 概念:函數(shù)防抖(debounce),就是指觸發(fā)事件后,在 n 秒內函數(shù)只能執(zhí)行一次,如果觸發(fā)事件后在 n 秒內又觸發(fā)了事件,則會重...
摘要:而上述兩種方法,就叫做函數(shù)的節(jié)流和防抖。二函數(shù)節(jié)流和函數(shù)防抖函數(shù)節(jié)流函數(shù)節(jié)流函數(shù)節(jié)流是讓這個函數(shù)在間隔某一段時間執(zhí)行一次。在這個項目中,我認為函數(shù)節(jié)流和函數(shù)防抖都能很好的解決問題。 一 項目需求 最近在做一些小的練手代碼的時候,碰到了一個很常見的問題,當在搜索框中進行搜索的時候,如果快速輸入很多字符的話,搜索框的監(jiān)聽回調函數(shù)會執(zhí)行很多次,如果回調業(yè)務較復雜的話,可能會導致頁面運行緩慢甚...
摘要:隆重請出主角防抖與節(jié)流。防抖與節(jié)流的異同相同都是防止某一時間段內,函數(shù)被頻繁調用執(zhí)行,通過時間頻率控制,減少回調函數(shù)執(zhí)行次數(shù),來實現(xiàn)相關性能優(yōu)化。參考文章分鐘理解的節(jié)流防抖及使用場景函數(shù)防抖和節(jié)流 showImg(https://segmentfault.com/img/bVburM8?w=800&h=600); 本篇課題,或許早已是爛大街的解讀文章。不過春招系列面試下來,不少伙伴們還...
摘要:基礎防抖我們現(xiàn)在寫一個最基礎的防抖處理標記事件也做如下改寫現(xiàn)在試一下,我們會發(fā)現(xiàn)只有我們停止?jié)L動秒鐘的時候,控制臺才會打印出一行隨機數(shù)。 為何要防抖和節(jié)流 有時候會在項目開發(fā)中頻繁地觸發(fā)一些事件,如 resize、 scroll、 keyup、 keydown等,或者諸如輸入框的實時搜索功能,我們知道如果事件處理函數(shù)無限制調用,會大大加重瀏覽器的工作量,有可能導致頁面卡頓影響體驗;后臺...
摘要:本文會分別介紹什么是防抖和節(jié)流,它們的應用場景,和實現(xiàn)方式。防抖和節(jié)流都是為了解決短時間內大量觸發(fā)某函數(shù)而導致的性能問題,比如觸發(fā)頻率過高導致的響應速度跟不上觸發(fā)頻率,出現(xiàn)延遲,假死或卡頓的現(xiàn)象。 本文由小芭樂發(fā)表 0. 引入 首先舉一個例子: 模擬在輸入框輸入后做ajax查詢請求,沒有加入防抖和節(jié)流的效果,這里附上完整可執(zhí)行代碼: 沒有防抖 ...
閱讀 638·2021-11-25 09:43
閱讀 1906·2021-11-17 09:33
閱讀 824·2021-09-07 09:58
閱讀 2062·2021-08-16 10:52
閱讀 482·2019-08-30 15:52
閱讀 1722·2019-08-30 15:43
閱讀 974·2019-08-30 15:43
閱讀 2924·2019-08-29 16:41