The lodash _.throttle method.

There are times when I want to fire a method once an amount of time has passed. I can always just use setTimeout or setInterval, and make my own solution that is some kind of advanced process management solution. However this is a lodash post as such I shale be writing some _.throttle examples, which is one way to make throttled methods.

_.throttle examples

So here are some quick examples.

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
var sec = _.throttle(function(){
console.log('every second');
},1000);
var hundredMS = _.throttle(function(){
console.log('every one hundred ms');
},100);
var loop = function(){
setTimeout(loop,33)
sec();
hundredMS();
};
loop();

_.throttle differers from setTimeout and setInterval as it returns a new function that will only fire once the amount of time has passed when it is being called, rather than setting a function to call after an amount of time has passed, or at a certain interval.

The power of closures, and high order functions.

_.throttle is a good example of what can be done with closures, and high order functions. Which are just fancy terms for functions within functions that accept functions as one or more of there arguments.

Vanilla js alternative example

I was able to put this together in a flash. I love quick little examples like this, and also If I wanted to I could go in a novel, custom direction with it.

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
var throttle = function (func, rate) {
var lastTime = new Date(),
api;
rate = rate || 1000;
// define the api
api = function () {
var now = new Date();
if (now - lastTime >= rate) {
func();
lastTime = now;
}
};
// call now
api.now = function(){
func();
};
// return the api
return api;
};

What is returned is an api that uses the method that is given to it as the first argument. This way whenever I call the method that is returned I am not directly calling the given method, I am instead calling a method inside the body of my throttle method that will call the given method when a given amount of time has passed.

I also have the beginning of a more complex api starting in which I can also just directly call the given method if I want to with a properly named “now” method.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// using my throttle function
var foo = throttle(function(){
console.log('foo');
},3000),
// a basic loop
loop = function(){
setTimeout(loop,33);
foo(); // foo every three seconds
};
// call once now
foo.now();
// start loop
loop();