javascript - throttle executes the function at most one time per wait period right?
问题描述
I want to throttle my function every 100 milliseconds. In the following code, I expect only 1 and 3 to be printed. But 2 is also printed in the actual result.
function say(what) {
console.log(what);
}
const t = _.throttle(say, 100);
setTimeout(() => {
t(1);
}, 50);
setTimeout(() => {
t(1);
}, 50);
setTimeout(() => {
t(1);
}, 50);
setTimeout(() => {
t(1);
}, 55);
setTimeout(() => {
t(2);
}, 55);
setTimeout(() => {
t(3);
}, 500);
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.11.1/lodash.js"></script>
I have to change the throttle wait time to 500 in order to filter out the 2.
Maybe my understanding of throttle is wrong. Shouldn't throttle execute the function at most one time per wait period?
解决方案
Your understanding of how you are using this throttle setup is not quite right.
To directly answer:
Shouldn't throttle execute the function at most one time per wait period?
With no options passed in, throttle will execute at the beginning and the end of the wait period (twice), provided the throttled function was called more than once in that period.
At 50ms your first function is called, and 'throttle' runs it immediately, also at this time your next f(1) is queued up to be called at 100ms. But then another f(1) is called, and another f(1) and then an f(2), and each new one replaces the last as the function to be called at 100ms (which is the time you've passed into throttle). Then over 100ms passes and then f(3) is called more or less when it should be.
If you don't pass any options into _.throttle
it will immediately call the first function run (at 0ms) and then will call the last function run inside the set time period once that time elapses.
Using @zfrisch's code as a start:
function say(what) {
console.log(what);
}
const t = _.throttle(say, 100);
const TO = (n, i) => setTimeout(() => {
t(n);
}, i);
TO(1, 50); // logged immediately
TO(1, 50);
TO(1, 50);
TO(1, 55);
TO(2, 55); // logged at 100ms (as it was the last function attempted)
function say(what) {
console.log(what);
}
const t = _.throttle(say, 100, { leading: false });
const TO = (n, i) => setTimeout(() => {
t(n);
}, i);
TO(1, 50); // not logged at all
TO(1, 50);
TO(1, 50);
TO(1, 55);
TO(2, 55); // logged at 100ms (as it was the last function attempted)
function say(what) {
console.log(what);
}
const t = _.throttle(say, 100, { trailing: false });
const TO = (n, i) => setTimeout(() => {
t(n);
}, i);
TO(1, 50); // logged immediately
TO(1, 50);
TO(1, 50);
TO(1, 55);
TO(2, 55); // not logged at all
推荐阅读
- angular - Angular - 使用 Jasmine 监视 HttpClient 中的链式方法
- c++ - Eigen3 类的模板特化
- php - 在 POST 请求中获取多个输入字段
- javascript - 通过 Javascript onmouseover 事件处理程序将列表框中的值正确显示到 DIV 元素中
- symfony - 通过 Easy Deploy Bundle SSH 部署 Symfony
- mysql - 如何连接不同表中的值 - mysql
- python - 计算机视觉 openCV2 pyautogui
- jenkins - 在 Jenkins 插件中访问 GitLab 访问令牌
- javascript - 如何使用appendTo在div中获取div?
- set - Minizinc:连续输出 int 的决策变量集的值