How to make array.forEach(asyncfn) synchronized? - javascript

Say I have an array and I want to perform an async-function on each element of the array.
let a = [x1, x2, x3]
// I want to
await a.forEach(async (x) => {...})
// which equals to
let fn = async (x) => {...}
await fn(x1)
await fn(x2)
await fn(x3)
How can I do this?

Like this?
for (let x of a) {
await fn(x);
}
Or if you really dislike creating a separate fn:
for (let x of a) {
await (async v => {
...
})(x);
}
You could even add it to Array.prototype:
Array.prototype.resolveSeries = async function(fn) {
for (let x of this) {
await fn(x);
}
}
// Usage:
await a.resolveSeries(fn);
// Or:
await a.resolveSeries(async x => {
...
});

I have used a library called async. There a function called eachSeries. It takes an array, an async function, and a callback. The function is called on each item for the array.
This question can open a rabbit hole of complexity. You will need to be careful that your async function doesn't make an asynchronous call. The library provides a callback that can be useful in this case.
function asyncFunction(val, callback) {
return (function() {
//do stuff
callback();
})();
}
The callback will initiate the a call on the next item in the array.

I've been using this function for a while, in case if a dedicated library is not desired:
// usage:
// array.asyncEach(function(item, resume) {
// do something...
// console.log(item);
// resume(); // call `resume()` to resume the cycle
// }
//
// unless resume() is called, loop doesn't proceed to the next item
Array.prototype.asyncEach = function(iterator) {
var list = this,
n = list.length,
i = -1,
calls = 0,
looping = false;
var iterate = function() {
calls -= 1;
i += 1;
if (i === n) return;
iterator(list[i], resume);
};
var loop = function() {
if (looping) return;
looping = true;
while (calls > 0) iterate();
looping = false;
};
var resume = function() {
calls += 1;
if (typeof setTimeout === 'undefined') loop();
else setTimeout(iterate, 1);
};
resume();
};
Perform any async tasks inside the function, and call resume() when you are done.
I don't remember where did I get this function from.

Is there any specific event on which these function will be called ?
if yes can be achieved through **closure** in javascript.
right now your function will be called with last value in array when you invoke it

Related

Wait for click event inside a for loop - similar to prompt()

This might not have the greatest title. I'm trying to understand call back functions, and I was wondering how replacing prompt() in the following code could be achieved, without losing the for loop?
for(i=0;i<4;i++){
let x = prompt("Input an integer");
// store input into an array
}
I've tried something like:
for(let i = 0; i<4; i++){
let x = document.getElementById("someId");
x.addEventListener("click", rcvInput(function(i){
if(i == 3){
x.removeEventListener("click", rcvInput)
}
}));
}
function rcvInput(callback){
//store input into an array
callback();
}
I know this can be done without the for loop, I'm more curious if callbacks could be able to pause the loop and wait for input?
Depending on what your end goal is, I'm pretty sure there's a better way to do it. But for the sake of doing that:
You can create a method that returns a promise that resolves when a click happens. Then you can use async/await to do what you need.
By using a Promise and awaiting on it, you can technically "pause" your for loop until something happens. In this case, a click.
Remember the method that encloses the for loop has to be async.
function getClick() {
return new Promise(acc => {
function handleClick() {
document.removeEventListener('click', handleClick);
acc();
}
document.addEventListener('click', handleClick);
});
}
async function main() {
for (let i=0;i<4;i++) {
console.log("waiting for a click", i);
await getClick();
console.log("click received", i);
}
console.log("done");
}
main();
Try it in this plunkr.
To acheieve:
for(var i=0;i<4;i++){
let x = prompt("Input an integer"); // WAIT FOR PROMPT
// ...
// LOOP CODE AFTER PROMPT
}
you can use recursion:
function promptLoop(count){
let x = prompt("Input an integer");
// ...
// LOOP CODE AFTER PROMPT
if (count > 0) promptLoop(count - 1)
}
and use it like so:
promptLoop(4);
Your second scenario is different, and can be adapted like so:
function loop(count, method) {
if (count > 0) method(() => loop(count - 1, method), count);
}
Your function would then take a next callback, like so:
function toBeLooped(next){
// do stuff
next() // continues loop
}
loop(3, toBeLooped);

Calling Method while looping through an Array of Objects

How can I call a method while looping through a list of objects and all its properties?
At the moment I am trying to do a setTimeout() in one of the properties of the object and then move on to the next property after the setTimeout() finishes the delay. I would also like to append an li to the DOM further down the array list while still printing the string in the statement.
Any advice would be greatly appreciated, thank you.
Here is the javascript:
const lvls = {
start: {
lvlTitle: 'Lets Start!',
delay: setTimeout(function () {
console.log("On Lets Start click I am supposed to wait a few seconds and then proceed on to the next lvl..");
}, 1000)
},
lvl1: {
lvlTitle: 'Drinks/Soda/water',
statement1: 'lvl1 info...',
statement2: 'lvl1 more info...',
statement3: 'lvl1 more more info' && function createContent1() {
var ul = document.querySelector('.text-container');
var li = document.createElement('li');
li.appendChild(document.createTextNode('more text in this new div'));
ul.appendChild(li);
}
},
lvl2: {
lvlTitle: 'Portion Control/Meals',
statement1: 'lvl2 info...',
statement2: 'lvl2 more info...',
statement3: 'lvl2 more more info' && function createContent2() {
var ul = document.querySelector('.text-container');
var li = document.createElement('li');
li.appendChild(document.createTextNode('more text in this new div'));
ul.appendChild(li);
}
}
}
function* deepValuesIterator(o) {
if (typeof o === 'object') {
for (const value of Object.values(o)) {
yield* deepValuesIterator(value)
}
} else {
yield o
}
}
function* nextLevel(levels, generator, element) {
while (true) {
for (const value of generator(levels)) {
yield element.textContent = value
}
}
}
const printText = document.querySelector('.text-container')
const lvlsIterator = nextLevel(lvls, deepValuesIterator, printText)
printText.addEventListener('click', () => lvlsIterator.next())
lvlsIterator.next()
And Here is the HTML:
<div class="full-page">
<div class="click-container">
<ul class="text-container">
<li class="text-content">
<div></div>
</li>
</ul>
</div>
Lastly here is a JSFiddle:
Calling Method while Looping Through Array List
Function have different type, so your code didn't call function.
I added checkout for function to your deepValuesIterator function.
function* deepValuesIterator(o) {
console.log('')
if (typeof o === 'object') {
console.log('objects')
console.log(o)
for (const value of Object.values(o)) {
yield* deepValuesIterator(value);
}
} else if(typeof o === 'function'){
console.log('function');
yield o();
} else {
console.log(' not objects')
console.log(typeof o )
console.log(o)
yield o;
}
}
Link to fiddle
how can I call a method while looping through a list of objects and all its properties?
Thats fairly simple, while iterating just check if the property is a function, if so call it.
At the moment I am trying to do a setTimeout() in one of the properties of the object and then move on to the next property after the setTimeout() finishes the delay
There are some missconceptions here:
The timeout starts when the script loads, not when the iterator reaches it, as its not a method but just a function call inside the properties expression.
The timeout won't delay anything. There is no "blocking js", javascript solves such problems through callbacks, and that don't really work well with iterators natively (yet). But you could write a regular function that iterates over an iterator and passes a callback into every yielded function:
function waitIterate(iterator) {
var blocked = false;
return function next() {
if(blocked) return;
const { value, done } = iterator.next();
if(done) blocked = true;
if(typeof value === "function") {
blocked = true;
value(() => (blocked = false, next()));
} else { next(); }
};
}
So how can we use this? Like this:
function* stuff() {
alert("test");
yield function(cb) { setTimeout(cb, 1000); }
alert("test2");
}
printText.addEventListener('click', waitIterate(stuff()));
Your original code still needs some modifications, this is just to demonstrate the concept.

How do you pass a value back to generator function when using for of loop

I'm learning about generators and and iterators and I can't figure out, nor find any details on how to pass a value back to a generator object when iterating over the object using a for of loop. I'd like to pass the counter value back on each iteration. How is this possible?
function generate(time, id) {
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log(`ALERT: ${id}`)
resolve(`${id} success.`)
}, time)
})
}
function* generator() {
const testA = yield generate(3000, 'A')
console.log(`Returned: ${testA}`)
const testB = yield generate(500, 'B')
console.log(`Returned: ${testB}`)
const testC = yield generate(300, 'C')
console.log(`Returned: ${testC}`)
}
async function test() {
let counter = 1
const genObj = generator()
// await genObj.next(counter).value
// counter += 1
// await genObj.next(counter).value
for (x of genObj) {
console.log('From here.')
const t = await x
counter += 1
console.log(t)
}
}
test()
By the spec this is not possible as no arguments are passed to the next() method internally when used in iterator loops like for ... of
https://www.ecma-international.org/ecma-262/6.0/#sec-iterator-interface
The for-of statement and other common users of Iterators do not pass
any arguments, so Iterator objects that expect to be used in such a
manner must be prepared to deal with being called with no arguments.
So in your case you would have to do a loop where you explicitly call next()

JavaScript wait for async functions in while loop

I currently have 5 functions; each one uses setInterval to wait for an element to load and than clicks the element when it is available which leads to the next webpage. These functions also take place inside of a while loop. It is very important that these functions take place one after another and the while loop waits for all the functions to complete before looping again. Due to the functions being asynchronous the loop will run x times before any of the functions can even load.
Example of what I am trying to do:
function one () {
var checkForItem = setInterval(function () {
if ($('#element').length) {
$('#element').click();
clearInterval(checkForItem);
}
}, 100);
}
Imagine 5 of these functions (one, two, three, four, five), all with the same format using setInterval and the following while loop:
var x = 0, y = 10;
while (x < y){
one();
two();
three();
four();
five();
x++
}
How would I go about ensuring all the functions take place one after another before having the loop continue?
Note: I have tried using promises although due to the functions being async the loop still continues before the functions complete.
Use async/await syntax with the promises:
function delay(t) {
return new Promise(resolve => setTimeout(resolve, t));
}
async function one() {
while (!$('#element').length) {
await delay(100);
}
$('#element').click();
}
async function main() {
for (var x = 0; x < 10; x++) {
await one();
await two();
await three();
await four();
await five();
}
}
Define the selectors in an array, and gradually iterate over the array in the interval, until the end of the array is reached:
const initialSelectorsToFind = ['#element1', '#element2', '#element3']; // add more as desired
const elementSelectorsToFind = Array.from({ length: 10 })
.reduce(arrSoFar => [...arrSoFar, ...initialSelectorsToFind], []);
let elementIndexToFind = 0;
function tryClick(){
const elementToFind = $(elementSelectorsToFind[elementIndexToFind]);
if (elementToFind.length) {
elementToFind.click();
elementIndexToFind++;
if (elementIndexToFind === elementSelectorsToFind.length) {
clearInterval(tryClickInterval);
}
}
}
const tryClickInterval = setInterval(tryClick, 100);
But if you're trying to trigger a function (such as something that clicks an element) when an element gets added to the DOM, it would be far better off to use something that triggers when the add occurs, such as a callback in the creator function, or MutationObserver
Try wrap promise with async await:
async function one (){
await (new Promise(function(reolve, reject){
var checkForItem = setInterval(function () {
if ($('#element').length) {
$('#element').click();
clearInterval(checkForItem);
resolve();
}
}, 100);
}));
}
//And then in your while loop:
while (x < y){
await one();
await two();
...
x++
}
note: your while loop must be wrapped in an async function also.

Function in JavaScript that can be called only once

I need to create a function which can be executed only once, in each time after the first it won't be executed. I know from C++ and Java about static variables that can do the work but I would like to know if there is a more elegant way to do this?
If by "won't be executed" you mean "will do nothing when called more than once", you can create a closure:
var something = (function() {
var executed = false;
return function() {
if (!executed) {
executed = true;
// do something
}
};
})();
something(); // "do something" happens
something(); // nothing happens
In answer to a comment by #Vladloffe (now deleted): With a global variable, other code could reset the value of the "executed" flag (whatever name you pick for it). With a closure, other code has no way to do that, either accidentally or deliberately.
As other answers here point out, several libraries (such as Underscore and Ramda) have a little utility function (typically named once()[*]) that accepts a function as an argument and returns another function that calls the supplied function exactly once, regardless of how many times the returned function is called. The returned function also caches the value first returned by the supplied function and returns that on subsequent calls.
However, if you aren't using such a third-party library, but still want a utility function (rather than the nonce solution I offered above), it's easy enough to implement. The nicest version I've seen is this one posted by David Walsh:
function once(fn, context) {
var result;
return function() {
if (fn) {
result = fn.apply(context || this, arguments);
fn = null;
}
return result;
};
}
I would be inclined to change fn = null; to fn = context = null;. There's no reason for the closure to maintain a reference to context once fn has been called.
Usage:
function something() { /* do something */ }
var one_something = once(something);
one_something(); // "do something" happens
one_something(); // nothing happens
[*] Be aware, though, that other libraries, such as this Drupal extension to jQuery, may have a function named once() that does something quite different.
Replace it with a reusable NOOP (no operation) function.
// this function does nothing
function noop() {};
function foo() {
foo = noop; // swap the functions
// do your thing
}
function bar() {
bar = noop; // swap the functions
// do your thing
}
Point to an empty function once it has been called:
function myFunc(){
myFunc = function(){}; // kill it as soon as it was called
console.log('call once and never again!'); // your stuff here
};
<button onClick=myFunc()>Call myFunc()</button>
Or, like so:
var myFunc = function func(){
if( myFunc.fired ) return;
myFunc.fired = true;
console.log('called once and never again!'); // your stuff here
};
// even if referenced & "renamed"
((refToMyfunc)=>{
setInterval(refToMyfunc, 1000);
})(myFunc)
UnderscoreJs has a function that does that, underscorejs.org/#once
// Returns a function that will be executed at most one time, no matter how
// often you call it. Useful for lazy initialization.
_.once = function(func) {
var ran = false, memo;
return function() {
if (ran) return memo;
ran = true;
memo = func.apply(this, arguments);
func = null;
return memo;
};
};
Talking about static variables, this is a little bit like closure variant:
var once = function() {
if(once.done) return;
console.log('Doing this once!');
once.done = true;
};
once(); // Logs "Doing this once!"
once(); // Logs nothing
You could then reset a function if you wish:
once.done = false;
once(); // Logs "Doing this once!" again
You could simply have the function "remove itself"
​function Once(){
console.log("run");
Once = undefined;
}
Once(); // run
Once(); // Uncaught TypeError: undefined is not a function
But this may not be the best answer if you don't want to be swallowing errors.
You could also do this:
function Once(){
console.log("run");
Once = function(){};
}
Once(); // run
Once(); // nothing happens
I need it to work like smart pointer, if there no elements from type A it can be executed, if there is one or more A elements the function can't be executed.
function Conditional(){
if (!<no elements from type A>) return;
// do stuff
}
var quit = false;
function something() {
if(quit) {
return;
}
quit = true;
... other code....
}
simple decorator that easy to write when you need
function one(func) {
return function () {
func && func.apply(this, arguments);
func = null;
}
}
using:
var initializer= one( _ =>{
console.log('initializing')
})
initializer() // 'initializing'
initializer() // nop
initializer() // nop
try this
var fun = (function() {
var called = false;
return function() {
if (!called) {
console.log("I called");
called = true;
}
}
})()
From some dude named Crockford... :)
function once(func) {
return function () {
var f = func;
func = null;
return f.apply(
this,
arguments
);
};
}
Reusable invalidate function which works with setInterval:
var myFunc = function (){
if (invalidate(arguments)) return;
console.log('called once and never again!'); // your stuff here
};
const invalidate = function(a) {
var fired = a.callee.fired;
a.callee.fired = true;
return fired;
}
setInterval(myFunc, 1000);
Try it on JSBin: https://jsbin.com/vicipar/edit?js,console
Variation of answer from Bunyk
Here is an example JSFiddle - http://jsfiddle.net/6yL6t/
And the code:
function hashCode(str) {
var hash = 0, i, chr, len;
if (str.length == 0) return hash;
for (i = 0, len = str.length; i < len; i++) {
chr = str.charCodeAt(i);
hash = ((hash << 5) - hash) + chr;
hash |= 0; // Convert to 32bit integer
}
return hash;
}
var onceHashes = {};
function once(func) {
var unique = hashCode(func.toString().match(/function[^{]+\{([\s\S]*)\}$/)[1]);
if (!onceHashes[unique]) {
onceHashes[unique] = true;
func();
}
}
You could do:
for (var i=0; i<10; i++) {
once(function() {
alert(i);
});
}
And it will run only once :)
Initial setup:
var once = function( once_fn ) {
var ret, is_called;
// return new function which is our control function
// to make sure once_fn is only called once:
return function(arg1, arg2, arg3) {
if ( is_called ) return ret;
is_called = true;
// return the result from once_fn and store to so we can return it multiply times:
// you might wanna look at Function.prototype.apply:
ret = once_fn(arg1, arg2, arg3);
return ret;
};
}
If your using Node.js or writing JavaScript with browserify, consider the "once" npm module:
var once = require('once')
function load (file, cb) {
cb = once(cb)
loader.load('file')
loader.once('load', cb)
loader.once('error', cb)
}
If you want to be able to reuse the function in the future then this works well based on ed Hopp's code above (I realize that the original question didn't call for this extra feature!):
var something = (function() {
var executed = false;
return function(value) {
// if an argument is not present then
if(arguments.length == 0) {
if (!executed) {
executed = true;
//Do stuff here only once unless reset
console.log("Hello World!");
}
else return;
} else {
// otherwise allow the function to fire again
executed = value;
return;
}
}
})();
something();//Hello World!
something();
something();
console.log("Reset"); //Reset
something(false);
something();//Hello World!
something();
something();
The output look like:
Hello World!
Reset
Hello World!
A simple example for turning on light only once.
function turnOnLightOnce() {
let lightOn = false;
return function () {
if (!lightOn) {
console.log("Light is not on...Turning it on for first and last time");
lightOn = true;
}
};
}
const lightOn = turnOnLightOnce();
lightOn() // Light is not on...Turning it on for first and last time
lightOn()
lightOn()
lightOn()
lightOn()
https://codesandbox.io/s/javascript-forked-ojo0i?file=/index.js
This happens due to closure in JavaScript.
function once (fn1) {
var ran = false
var memo = null
var fn = function(...args) {
if(ran) {return memo}
ran = true
memo = fn1.apply(null, args)
return memo
}
return fn
}
I'm using typescript with node and it was #I Hate Lazy's answer that inspired me. I just assigned my function to a noop function.
let printName = (name: string) => {
console.log(name)
printName = () => {}
}
printName('Sophia') // Sophia
printName('Nico') // Nothing Happens
https://jsbin.com/yuzicek/edit?js,console
FOR EVENT HANDLER
If the function is a callback for an event listener, there is already a built-in option in the addEventListner method for just executing the callback once.
It can accept 3 parameters
Type
callback
options
options is an object that has a property called once
ex:
const button = document.getElementById('button');
const callbackFunc = () => {
alert('run')
}
button.addEventListener('click', callbackFunc, { once: true })
<button id="button">Click Once</button>
Trying to use underscore "once" function:
var initialize = _.once(createApplication);
initialize();
initialize();
// Application is only created once.
http://underscorejs.org/#once
var init = function() {
console.log("logges only once");
init = false;
};
if(init) { init(); }
/* next time executing init() will cause error because now init is
-equal to false, thus typing init will return false; */
if (!window.doesThisOnce){
function myFunction() {
// do something
window.doesThisOnce = true;
};
};
If you're using Ramda, you can use the function "once".
A quote from the documentation:
once Function
(a… → b) → (a… → b)
PARAMETERS
Added in v0.1.0
Accepts a function fn and returns a function that guards invocation of fn such that fn can only ever be called once, no matter how many times the returned function is invoked. The first value calculated is returned in subsequent invocations.
var addOneOnce = R.once(x => x + 1);
addOneOnce(10); //=> 11
addOneOnce(addOneOnce(50)); //=> 11
keep it as simple as possible
function sree(){
console.log('hey');
window.sree = _=>{};
}
You can see the result
JQuery allows to call the function only once using the method one():
let func = function() {
console.log('Calling just once!');
}
let elem = $('#example');
elem.one('click', func);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<p>Function that can be called only once</p>
<button id="example" >JQuery one()</button>
</div>
Implementation using JQuery method on():
let func = function(e) {
console.log('Calling just once!');
$(e.target).off(e.type, func)
}
let elem = $('#example');
elem.on('click', func);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<p>Function that can be called only once</p>
<button id="example" >JQuery on()</button>
</div>
Implementation using native JS:
let func = function(e) {
console.log('Calling just once!');
e.target.removeEventListener(e.type, func);
}
let elem = document.getElementById('example');
elem.addEventListener('click', func);
<div>
<p>Functions that can be called only once</p>
<button id="example" >ECMAScript addEventListener</button>
</div>
Tossing my hat in the ring for fun, added advantage of memoizing
const callOnce = (fn, i=0, memo) => () => i++ ? memo : (memo = fn());
// usage
const myExpensiveFunction = () => { return console.log('joe'),5; }
const memoed = callOnce(myExpensiveFunction);
memoed(); //logs "joe", returns 5
memoed(); // returns 5
memoed(); // returns 5
...
You can use IIFE. IIFE means Immediately Invoked Function Expression and the result is to call a function only once by the time is created.
Your code will be like this:
(function () {
//The code you want to execute only one time etc...
console.log("Hello world");
})()
Additionally, this way the data in the function remains encapsulated.
Of course and you can return values from the function and stored them into a new variable, by doing:
const/let value = (function () {
//The code you want to execute only one time etc...
const x = 10;
return x;
})()
function x()
{
let a=0;
return function check()
{
if(!a++)
{
console.log("This Function will execute Once.")
return;
}
console.log("You Can't Execute it For the Second Time.")
return;
}
}
z=x()
z() //Op - This Function will execute once
z() //OP - You can't Execute it for the second time.
I find it useful to just have a simple function that just returns true once, so you can keep the side effects higher up.
let once = () => !! (once = () => false);
once() // true
once() // false
Use like this:
if (once()) {
sideEffect()
}
This exploits the fact that you can coerce an assignment expression to return true while changing the same function into a function that returns false.
If you must have it execute a function, it can be adapted using a ternary:
let once = (x) => !! (once = () => false) ? x() : false;
Now it accepts a single function as an argument. Fun fact, the second false is never reached.
// This is how function in JavaScript can be called only once
let started = false;
if (!started) {
start() { // "do something" }
}
started = true;
}

Categories