èæµè£ é¥°å¨
å建ä¸ä¸ªâèæµâè£
é¥°å¨ throttle(f, ms) ââ è¿åä¸ä¸ªå
è£
å¨ã
å½è¢«å¤æ¬¡è°ç¨æ¶ï¼å®ä¼å¨æ¯ ms æ¯«ç§æå¤å°è°ç¨ä¼ éç» f 䏿¬¡ã
ä¸é²æï¼debounceï¼è£ 饰å¨ç¸æ¯ï¼å ¶è¡ä¸ºå®å ¨ä¸åï¼
debounceä¼å¨âå·å´ï¼cooldownï¼âæåè¿è¡å½æ°ä¸æ¬¡ãéç¨äºå¤çæç»ç»æãthrottleè¿è¡å½æ°çé¢çä¸ä¼å¤§äºæç»å®çæ¶é´ms毫ç§ãéç¨äºä¸åºè¯¥ç»å¸¸è¿è¡çå®ææ´æ°ã
æ¢å¥è¯è¯´ï¼throttle 就忥çµè¯çç§ä¹¦ï¼ä½æ¯ææ°èæ¿ï¼å®é
è°ç¨ fï¼çé¢çä¸è½è¶
è¿æ¯ ms 毫ç§ä¸æ¬¡ã
让æä»¬ççç°å®çæ´»ä¸çåºç¨ç¨åºï¼ä»¥ä¾¿æ´å¥½å°çè§£è¿ä¸ªéæ±ï¼å¹¶äºè§£å®çæ¥æºã
ä¾å¦ï¼æä»¬æ³è¦è·è¸ªé¼ æ ç§»å¨ã
卿µè§å¨ä¸ï¼æä»¬å¯ä»¥è®¾ç½®ä¸ä¸ªå½æ°ï¼ä½¿å ¶å¨æ¯æ¬¡é¼ æ ç§»å¨æ¶è¿è¡ï¼å¹¶è·åé¼ æ ç§»å¨æ¶çæéä½ç½®ãå¨ä½¿ç¨é¼ æ çè¿ç¨ä¸ï¼æ¤å½æ°é叏伿§è¡å°é常é¢ç¹ï¼å¤§æ¦æ¯ç§ 100 æ¬¡ï¼æ¯ 10 毫ç§ï¼ã
æä»¬æ³è¦å¨é¼ æ æéç§»å¨æ¶ï¼æ´æ°ç½é¡µä¸çæäºä¿¡æ¯ã
â¦â¦ä½æ¯æ´æ°å½æ° update() 太éäºï¼æ æ³å¨æ¯ä¸ªå¾®å°ç§»å¨ä¸é½æ§è¡ãé«äºæ¯ 100ms æ´æ°ä¸æ¬¡çæ´æ°é¢æ¬¡ä¹æ²¡ææä¹ã
å æ¤ï¼æä»¬å°å
¶å
è£
å°è£
饰å¨ä¸ï¼ä½¿ç¨ throttle(update, 100) ä½ä¸ºå¨æ¯æ¬¡é¼ æ ç§»å¨æ¶è¿è¡ç彿°ï¼è䏿¯åå§ç update()ãè£
饰å¨ä¼è¢«é¢ç¹å°è°ç¨ï¼ä½æ¯æå¤æ¯ 100ms å°è°ç¨è½¬åç» update() 䏿¬¡ã
å¨è§è§ä¸ï¼å®çèµ·æ¥åè¿æ ·ï¼
- 对äºç¬¬ä¸ä¸ªé¼ æ ç§»å¨ï¼è£
饰çåä½ç«å³å°è°ç¨ä¼ éç»
updateãè¿å¾éè¦ï¼ç¨æ·ä¼ç«å³çå°æä»¬å¯¹å ¶å¨ä½çååºã - ç¶åï¼éçé¼ æ ç§»å¨ï¼ç´å°
100ms没æä»»ä½ååºãè£ é¥°çåä½å¿½ç¥äºè°ç¨ã - å¨
100msç»ææ¶ ââ æåä¸ä¸ªåæ ååçäºä¸æ¬¡updateã - ç¶åï¼æåï¼é¼ æ å卿å¤ãè£
饰çåä½ä¼çå°
100mså°æï¼ç¶åç¨æåä¸ä¸ªåæ è¿è¡ä¸æ¬¡updateãå æ¤ï¼é常éè¦çæ¯ï¼å¤çæç»çé¼ æ åæ ã
ä¸ä¸ªä»£ç 示ä¾ï¼
function f(a) {
console.log(a);
}
// f1000 æå¤æ¯ 1000ms å°è°ç¨ä¼ éç» f 䏿¬¡
let f1000 = throttle(f, 1000);
f1000(1); // æ¾ç¤º 1
f1000(2); // (èæµï¼å°æªå° 1000ms)
f1000(3); // (èæµï¼å°æªå° 1000ms)
// å½ 1000ms æ¶é´å°...
// ...è¾åº 3ï¼ä¸é´å¼ 2 被忽ç¥
P.S. åæ°ï¼argumentsï¼åä¼ éç» f1000 çä¸ä¸æ this åºè¯¥è¢«ä¼ éç»åå§ç fã
function throttle(func, ms) {
let isThrottled = false,
savedArgs,
savedThis;
function wrapper() {
if (isThrottled) { // (2)
savedArgs = arguments;
savedThis = this;
return;
}
isThrottled = true;
func.apply(this, arguments); // (1)
setTimeout(function() {
isThrottled = false; // (3)
if (savedArgs) {
wrapper.apply(savedThis, savedArgs);
savedArgs = savedThis = null;
}
}, ms);
}
return wrapper;
}
è°ç¨ throttle(func, ms) è¿å wrapperã
- å¨ç¬¬ä¸æ¬¡è°ç¨æé´ï¼
wrapperåªè¿è¡func并设置å·å´ç¶æï¼isThrottled = trueï¼ã - å¨å·å´ç¶æä¸ï¼ææè°ç¨é½è¢«ä¿åå¨
savedArgs/savedThisä¸ã请注æï¼ä¸ä¸æï¼thisï¼ååæ°ï¼argumentsï¼é½å¾éè¦ï¼åºè¯¥è¢«ä¿å䏿¥ãæä»¬éè¦å®ä»¬æ¥éç°è°ç¨ã - ç»è¿
ms毫ç§åï¼setTimeoutä¸ç彿°è¢«è§¦åãå·å´ç¶æè¢«ç§»é¤ï¼isThrottled = falseï¼ï¼å¦æåå¨è¢«å¿½ç¥çè°ç¨ï¼å°ä½¿ç¨æå䏿¬¡è°ç¨ä¿åçåæ°åä¸ä¸æè¿è¡wrapperã
第 3 æ¥è¿è¡ç䏿¯ funcï¼èæ¯ wrapperï¼å 为æä»¬ä¸ä»
éè¦æ§è¡ funcï¼è¿éè¦å次è¿å
¥å·å´ç¶æå¹¶è®¾ç½® setTimeout 以éç½®èæµã