I am trying to cache the result from an ajax call using memoize
function from Underscore.js
. I am not sure of my implementation. Also how to retrieve back the cached result data using the key. Below is my implementation:
Javascript code:
var cdata = $http
.get(HOST_URL + "/v1/report/states")
.success(function(data) {
//put the result in the angularJs scope object.
$scope.states = data;
});
//store the result in the cache.
var cachedResult = _.memoize(
function() {
return cdata;
}, "states");
Is my usage of memoize to store the result of ajax is correct. Also once it is put in cache, how to retrieve based on the key. i.e 'states'.
Importance of Memoization: When a function is given in input, it performs the necessary computation and saves the result in a cache before returning the value. If the same input is received again in the future, it will not be necessary to repeat the process. It would simply return the cached answer from the memory.
Memoize effectively lets you cache the results of a function for the same arguments. Trite Example: function add(a, b) { return a + b; } add(20, 5); add(10, 10); add(20, 5); add(10, 10); add(20, 5);
In programming, memoization is an optimization technique that makes applications more efficient and hence faster. It does this by storing computation results in cache, and retrieving that same information from the cache the next time it's needed instead of computing it again.
Let us understand how _.memoize
works, it takes a function which needs to be memoized as first argument and caches the result of the function return for given parameter. Next time if the memoized function is invoked with same argument it will use cached result and the execution time for the function can be avoided. So it is very important to reduce the computation time.
As mentioned, the above fibonaci function it memoized works perfectly fine as the argument has a primitive type.
The problem occurs when you have to memoize a function which accepts an object. To solve this, _.memoize
accepts an optional argument hashFunction
which will be used to hash the input. This way you can uniquely identify your objects with your own hash functions.
The default implementation of _.memoize
(using the default hash function) returns the first argument as it is - in the case of JavaScript it will return [Object object]
.
So for e.g.
var fn = function (obj){ some computation here..}
var memoizedFn = _.memoize(fn);
memoizedFn({"id":"1"}) // we will get result, and result is cahced now
memoizedFn({"id":"2"}) // we will get cached result which is wrong
why default has function in _.memoize is function(x) {return x}
the problem can be avoided by passing a hash function
_.memoize(fn, function(input){return JSON.stringify(input)});
This was a real help for me when I was using _.memoize for a function that was working on arrays arguments.
Hope this helps many people in their work.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With