I'm working on quite a unique project and have a variable that calls my function, is it possible to have it where after it makes 1 function call, it stops working and becomes useless.
var limiter = function (limit, cb) {
var counter = limit;
return function () {
if (counter > 0) {
cb(counter);
counter--;
}
};
};
var counting = limiter(3, function (data) {
console.log('This function can be used ' + data + ' more times.');
});
for (var i = 0; i < 5; i++) {
counting();
};
Calling limiter with the first paramater as 1 and the second parameter as the function definition will allow you to run the function only one time. In this example, I have created the function 'counting' that will log how many more calls it has until it is useless (It only run three times, despite the for loop calling it five times). The for loop at the bottom just shows that it works. You can also create multiple functions using limiter, without the counters overlapping, as they will each have their own unique scope.
Fiddle: http://jsfiddle.net/Kajdav/acLxxywt/
Related
This is code used within nodered.
I'm invoking several timers with the same function, then either the timer actually runs and displays something,
or I stop the timer (clearTimeout) and the something doens't get displayed.
The first thing I tried is this:
// multiple calls method 1 - DOES NOT WORK (multiple calls of procedure with same name - no method to distuinguish
function displaysomethingelse7 (rdelay7, var37, var47) {
function performactualstuff (var3a7, var4a7) {
node.warn ("37:"+var3a7+", 47:"+var4a7);
}
timer7=setTimeout(performactualstuff, rdelay7, var37, var47);
node.warn ("starting timer27_inprocedure: "+timer7._idleStart);
function stop7() {
if (timer7) {
clearTimeout(timer7);
node.warn ("stopping timerid27 "+timer7._idleStart);
timer7 = 0;
}
}
return stop7;
}
// start 1
delay20=8500;
var20a=2;
var20b="b";
var t10 = displaysomethingelse7 (delay20, var20a, var20b);
// start 2
delay21=10500;
var21a=3;
var21b="c";
var t11 = displaysomethingelse7 (delay21, var21a, var21b);
// stop 1 ?
stopdelay30=8000;
setTimeout(t10, stopdelay30);
// stop 2 ?
stopdelay31=9000;
setTimeout(t11, stopdelay31);
This doens't work since the 'stop7' function has no method to disguinguish between timerIDs.
So I came up with an array of functions:
// multiple calls method 2 - array of functions
function displaysomethingelsetoo (r2delay, var77, var88) {
function performactualstufftoo (var77a, var88a) {
node.warn ("77:"+var77a+", 88:"+var88a);
}
timer8=setTimeout(performactualstufftoo, r2delay, var77, var88);
node.warn ("starting timer77_inprocedure= "+timer8._idleStart);
if (typeof stopa === 'undefined') stopa=[];
stopa[timer8._idleStart] = function (tf) {
if (tf) {
clearTimeout(tf);
node.warn ("stopping timerid3 "+tf._idleStart+"originaltimer="+timer8._idleStart);
tf = 0;
}
}
return stopa[timer8._idleStart];
}
// start 1
delay3=4000;
var5a=4;
var6a="d";
var t3a = displaysomethingelsetoo (delay3, var5a, var6a);
// start 2
delay4=5000;
var5b=5;
var6b="e";
var t3b = displaysomethingelsetoo (delay4, var5b, var6b);
// stop 1 ?
stopdelay3=2000;
setTimeout(t3a, stopdelay3, t3a);
// stop 2 ?
stopdelay4=3000;
setTimeout(t3b, stopdelay4, t3b);
But this isn't quite correct yet either - the stopa array has all the same function in it.
I think the solution could be to pass the parsed timer8 variable to the stopa[timer8._idleStart] function,
but I have no idea how to to do this.
This doens't work since the 'stop7' function has no method to disguinguish between timerIDs
You will want to use a closure here. I think you already tried to use one, and your code is structured like you were using one, there's only a tiny modification necessary: declare the variable as local to the displaysomethingelse7 function so that each invocation will create a new variable.
function displaysomethingelse(rdelay, a, b) {
function performactualstuff() {
node.warn ("37:"+a+", 47:"+b);
// btw, you'll want to close over a and b here as well
}
var timer = setTimeout(performactualstuff, rdelay);
// ^^^
node.warn ("starting timer_inprocedure: "+timer._idleStart);
return function stop() {
if (timer) {
clearTimeout(timer);
node.warn ("stopping timer "+timer._idleStart);
timer = 0;
}
};
}
I have the following code
startProgressTimer: function () {
var me = this,
updateProgressBars = function (eventItems) {
alert("updateProgressBars: looping");
alert("me.eventProgressTimerId:" + me.eventProgressTimerId);
var i = 0;
if (eventItems.length === 0) {
alert("internal Stop Begin")
clearInterval(me.eventProgressTimerId);
alert("internal Stop End")
eventItems = [];
}
for (i = 0; i < eventItems.length; i++) {
if (eventItems[i]._eventId) {
eventItems[i].updateProgressBar();
}
}
};
alert("Start Progress Timer");
this.eventProgressTimerId = setInterval(function () {
updateProgressBars([]);
}, 10000);
}
When the function is called I would expect it to run and bottom out only it keeps on looping.
screen output
ALERT:updateProgressBars: looping
ALERT:me.eventProgressTimerId:10
ALERT:internal Stop Begin
ALERT:internal Stop End
ALERT:updateProgressBars: looping
ALERT:me.eventProgressTimerId:10
ALERT:internal Stop Begin
ALERT:internal Stop End
Any ideas
I suspect the problem might be that the code you don't show calls the startProgressTimer() method more than once for the same instance of whatever object it belongs to, and then within the method you store the interval id in an instance property this.eventProgressTimerId - so multiple calls overwrite the property and you'd only be able to cancel the last one.
If that's the case, a simple fix is to declare your eventProgressTimerId as a local variable within startProgressTimer().
I have the following code:
for (var i = 0; i < numFiles; i++) {
$.post('/Secure/File/PhysicalFileHandler.ashx?custId=whatever&idx=' + i, function (data) {
ids += data + '|';
if (i == numFiles-1) {
ids = ids.substring(0, ids.length - 1);
}
});
}
How could I execute a chunk of code after the last post has finished? The method I was trying above does not work (i is == to numFiles already when it gets there). Suggestions?
This is a somewhat common problem - the "i" you are referencing is handled by the for function, and commonly the for function has finished executing by the time the callback is triggered (in which case, the "i" is equal to numFiles already). There are a couple solutions to this: one would be to change the callback to this:
(function (i) {
return function (data) {
ids += data + '|';
if (i == numFiles-1) {
ids = ids.substring(0, ids.length - 1);
}
})(i)
What this does is create a new function for each execution of the loop, and each time the function has it's own reference to "i" - instead of looking back to the for loop's definition/value of i, it has it's own local parameter to refer to. This has to be done by returning another function since you need the code to execute during the first pass of the for loop, ensuring the right value is preserved when the callback is triggered.
One other alternative is to wrap the entire post statement in a function with it's own copy of i - I don't think there's too much difference between the two. Personally, I favor the approach in the above snippet more since it minimizes the effect of the overall flow of the code, but opinions will vary on this.
The posts may not finish in the order they were started. You must count each one as it finishes to know that all have finished.
var finishedCount = 0; // track number of calls finished
for (var i = 0; i < numFiles; i++) {
(function(i) {
$.post('/Secure/File/PhysicalFileHandler.ashx?custId=whatever&idx=' + i, function (data) {
ids += data + '|';
finishedCount = finishedCount + 1; // increment number of calls finished
if (finishedCount == numFiles) { // run only when all calls have finished
ids = ids.substring(0, ids.length - 1);
}
});
})(i); // capture value of i in closure
}
Edit: Capturing value of i in the closure is no longer necessary since i is not used in the post callback function in this version.
I have a for loop in a search function, with a function that does a callback inside the loop, and I want to execute a BUILD() function after the loop, and after all the callbacks are completed. I am not sure how to do that, because the loop finishes before all the callbacks are done. The callbacks are API requests to get me data, and I want to BUILD() with that data.
I read up on deferred, so I tried to put the for loop inside a function to the deferred, and then calling BUILD() on '.then( ... )'. But that doesn't seem to work - I think I am understanding it wrong.
HELP?!
Note, this is using the Google Maps Places API (search and getDetails).
var types = {
'gym' : 'fitness, gym',
'grocery_or_supermarket': ''
}
function search() {
for (var key in types) {
var request = { ... };
service.search(request, searchCallback);
}
// PROBLEM AREA
BUILD();
}
function searchCallback(results, status) {
for (var i = 0; i < results.length; i++) {
var request = { ... };
service.getDetails(request, detailsCallback);
}
}
function detailsCallback(place, status) {
// add place marker to maps and assign info window and info window event
}
With a small modification of your code, it can be achieved.
var total = 1337; // Some number
var internal_counter = 0;
var fn_callback = function() {
searchCallback.apply(this, arguments);
if (++internal_counter === total) {
BUILD();
}
};
for (var i=0; i<total; i++) {
service.search(request, fn_callback);
...
Explanation
First, we create a local function and variable.
The variable is a counter, which is increased when the callback is called.
The function is passed to the asynchronous method (service.search), which calls the original callback. After increasing the counter, check the value of the counter against the variable which holds the total number of iterations. If these are equal, call the finishing function (BUILD).
A complex case: Dealing with nested callbacks.
var types = { '...' : ' ... ' };
function search() {
var keys = Object.keys(types);
var total = keys.length;
// This counter keeps track of the number of completely finished callbacks
// (search_callback has run AND all of its details_callbacks has run)
var internal_counter = 0;
for (var i=0; i<total; i++) {
var request = { '...' : ' ... ' };
services.search(request, fn_searchCallback);
}
// LOCAL Function declaration (which references `internal_counter`)
function fn_searchCallback(results, status) {
// Create a local counter for the callbacks
// I'm showing another way of using a counter: The opposite way
// Instead of counting the # of finished callbacks, count the number
// of *pending* processes. When this counter reaches zero, we're done.
var local_counter = results.length;
for (var i=0; i<results.length; i++) {
service.getDetails(request, fn_detailsCallback);
}
// Another LOCAL function (which references `local_counter`)
function fn_detailsCallback(result, status) {
// Run the function logic of detailsCallback (from the question)
// " ... add place marker to maps and assign info window ... "
// Reduce the counter of pending detailsCallback calls.
// If it's zero, all detailsCallbacks has run.
if (--local_counter === 0) {
// Increase the "completely finished" counter
// and check if we're finished.
if (++internal_counter === total) {
BUILD();
}
}
} // end of fn_detailsCallback
} // end of fn_searchCallback
}
The function logic is explained in the comments. I prefixed the heading of this section with "Complex", because the function makes use of nested local functions and variables. A visual explanation:
var types, BUILD;
function search
var keys, total, internal_counter, fn_searchCallback;
function fn_searchCallback
var result, status; // Declared in the formal arguments
var local_counter, i, fn_detailsCallback;
function fn_detailsCallback
var result, status; // Declared in the formal arguments
In the previous picture, each indention level means a new scope Explanaation on MDN.
When a function is called, say, 42 times, then 42 new local scopes are created, which share the same parent scope. Within a scope, declared variables are not visible to the parent scope. Though variables in the parent scope can be read and updated by variables in the "child" scope, provided that you don't declare a variable with the same name. This feature is used in my answer's function.
I think you understand this already, but as it is the BUILD() is getting called linearly while the previous callback functions are still running. It's like you've created extra threads. One way to solve the problem would be to make BUILD a callback from the search function with the for loop in it. This would guarantee all functionality is complete before calling it.
This question might help implement the callback: Create a custom callback in JavaScript
function animateGraph() {
var graph;
for(i=0; i<10; i++)
{
var start = new Date();
while((new Date()) - start <= 500) {/*wait*/}
document.getElementById("timeMark").innerHTML = phoneX[i].epoch;
}
}
The loop works. The wait works. But the document.getElement is not showing up until the last item in the array...why?
Using setTimeout will allow the code to run and not lock up the page. This will allow it to run the code and will not effect other elements on the page.
var cnt = 0;
(function animateGraph() {
document.getElementById("timeMark").innerHTML = phoneX[cnt].epoch;
cnt++;
if (cnt<10){
window.setTimeout(animateGraph,500);
}
})();
The while loop, waiting for a datetime, is not a good way to wait - it just blocks execution. It keeps the browser (including UI, and its updating) frozen until the script finishes. After that, the window is repainted according to the DOM.
Use window.setTimeout() instead:
function animateGraph(phoneX) {
var el = document.getElementById("timeMark")
var i = 0;
(function nextStep() {
if (i < phoneX.length )
el.innerHTML = phoneX[i].epoch;
i++;
if (i < phoneX.length )
window.setTimeout(nextStep, 500);
})();
}
Please note that this runs asynchronous, i.e. the function animateGraph will return before all phoneXes are shown.
Use setTimeout instead of a while loop.
https://developer.mozilla.org/en/DOM/window.setTimeout
Also try something like this.
Javascript setTimeout function
The following snippet uses a helper function to create the timers. This helper function accepts a loop counter argument i and calls itself at the end of the timer handler for the next iteration.
function animateGraph() {
var graph;
setTimeMarkDelayed(0);
function setTimeMarkDelayed(i) {
setTimeout(function() {
document.getElementById("timeMark").innerHTML = phoneX[i].epoch;
if (i < 10) {
setTimeMarkDelayed(++i);
}
}, 3000);
}
}
You actually need some sort of helper function, otherwise you'll end up overwriting the value of i in your for loop in every iteration and by the time your timers run out, i will already be 9 and all handlers will act on the last element in phoneX. By passing i as an argument to the helper function, the value is stored in the local scope of that function and won't get overwritten.
Or you could use setInterval like Radu suggested, both approaches will work.