百度防抖與節流，一直沒搞懂防抖與節流的區別，然後google了一下，（google大法好 _(:з」∠)_）個人理解了一下 1，比較正式的解釋他們的區別： 防抖：就是指觸發事件後在 n 秒內函數只能執行一次，如果在 n 秒內又觸發了事件，則會重新計算函數執行時間，防抖註重結果 節流：:是讓一個函數無 ...
百度防抖與節流，一直沒搞懂防抖與節流的區別，然後google了一下，（google大法好
_(:з」∠)_）個人理解了一下 1，比較正式的解釋他們的區別： 防抖：就是指觸發事件後在 n 秒內函數只能執行一次，如果在 n 秒內又觸發了事件，則會重新計算函數執行時間，防抖註重結果 節流：:是讓一個函數無法在很短的時間間隔內連續調用，當上一次執行完之後過了規定的時間間隔，才能進行下一次的函數調用，節流註重過程 2，非官方解釋 防抖：A打了一個B一下，B開始哭（假設哭5分鐘），在這5分鐘內A一直打，而B就只為哭A打的第一下，其他的從第二次開始，B就像練了金鐘罩一樣，抗打ƪ(˘⌣˘)ʃ，但是這5分鐘過了之後金鐘罩沒了，需要A重新打一次，讓B哭出來才重新生成金鐘罩 節流：這就有點像鬼畜了，A一直打，B一直哭，但是每次都是重新哭，類似於諸葛亮說 ‘竟然有如此厚顏無恥之人’，那麼我們在暫停與播放之間快速切換就會出現 ‘竟然’ ‘竟然’ ‘竟然’ ‘竟然’ ‘竟然’ ‘竟然’ ‘竟然’ ‘竟然’ ‘有如此厚顏無恥之人’； 3，應用場景 防抖：視窗 resize時，搜索時需要根據輸入框中的內容發送ajax請求時。。。。。。 節流：滾動條到達底部（比如要做載入更多）。。。。。。 4，程式實現：//節流 let time; let per = 200; //這個是間隔時間，即事件觸發到事件回調開始執行的間隔時間。根據業務需求決定 function throtting(){ if(time){ clearTimeout(time) } time = setTimeout(function(){ //事件回調的具體方法 },per) } //防抖 let timelength=2000;//即在2秒內自第二次開始的其他事件觸發都將被忽略 let lasttime = null;//上一次執行的時間點 function debounce(){ if(!lasttime){ lasttime = new Date().getTime() }else{ let curenttime=new Date().getTime(); if(curenttime - lasttime>2000){ //事件回調的具體方法 //需將上一次的時間更新↓ lasttime = curenttime }else{ //時間不夠，不做任何操作 return false } } }
