Develop Reference

Make JS function output while function running

Javascript code
function sleep(milliseconds) {
const date = Date.now();
let currentDate = null;
do {
currentDate = Date.now();
} while (currentDate - date < milliseconds);
}
window.CP.PenTimer.MAX_TIME_IN_LOOP_WO_EXIT = 1000000;
var money = 0
var i = 0
let dollars = document.getElementById("total")
let dollarclick = document.getElementById("click1")
let autoclick = document.getElementById("buyauto")
dollarclick.addEventListener("click", clicked)
autoclick.addEventListener("click", auto)
function clicked() {
money = money + 1
dollars.innerHTML = "$"+ money.toString()
}
function auto() {
autoclick.disabled = true
console.log("function skull")
while (i<10) {
money = money + 1
dollars.innerHTML = "$"+ money.toString()
sleep(1000)
console.log(money)
i++
}
}
How to make the function output while it is running, and not let it output after the function is already finished? Keep in mind I am making a cookie clicker type game, with the auto being able to be purchased only once. Can you help me resolve this problem? The game should be able to give the points every second, and not after the function has finished. Please help me, thank you!

You can do this in an asynchronous manner.
I have used a function (setTimeoutAsync from #3 here) that resolves a promise after a timeout, and an asynchronous recursive function (nClicks(n)) that uses await for the timeout before performing the action and awaits recursion n times before returning.
Then, the asynchronous event handler just needs to disable the button and wait for nClicks(10) to complete before doing other stuff like re-enabling the button. If you don't need to do other stuff afterwards you can omit the async declaration on the handler and just call nClicks(10) without await.
const setTimeoutAsync = function(timeout) {
return new Promise((resolve) => {
setTimeout(() => {
resolve()
}, timeout)
})
}
let money = 0
const dollars = document.getElementById('total')
const tick = () => {
dollars.innerHTML = `$${++money}`
console.log('tick', dollars.innerHTML)
}
const nClicks = async(n) => {
if (n) {
// wait one second
await setTimeoutAsync(1000)
// then incriment
tick()
// wait for recursion to complete
await nClicks(--n)
}
}
const dollarclick = document.getElementById('click1')
const autoclick = document.getElementById('buyauto')
dollarclick.addEventListener('click', tick)
autoclick.addEventListener('click', async() => {
autoclick.disabled = true
// wait for 10 cycles
await nClicks(10)
autoclick.disabled = false
})
const autoclickOnce = document.getElementById('buyautoOnce')
autoclickOnce.addEventListener('click', () => {
autoclickOnce.disabled = true
nClicks(10)
})
<h1 id="total">$0</h1>
<button id="click1">+1</button>
<button id="buyauto">Auto</button>
<button id="buyautoOnce">Auto Once</button>

What makes `async/await` statements run sequentially vs in parallel in ES6?

I have already gone through the thread Any difference between await Promise.all() and multiple await?, so I am clear about Promise.all and multiple awaits.
Still, I am not very clear about the below 2 scenarios.
In Case 1 why does it execute sequentially (takes 10s) whereas in Case 2 it executes in parallel (takes 4s)?
Case 1:
function promiseWait(time) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(true);
}, time);
});
}
async function test1() {
var t0 = performance.now()
var a = await promiseWait(1000)
var b = await promiseWait(2000)
var c = await promiseWait(3000)
var d = await promiseWait(4000)
var t1 = performance.now()
console.log("Call to doSomething took " + (t1 - t0) + " milliseconds."); //takes 10secs
}
test1()
Case 2:
function promiseWait(time) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(true);
}, time);
});
}
async function test2() {
var t0 = performance.now()
const p1 = promiseWait(1000);
const p2 = promiseWait(2000);
const p3 = promiseWait(3000);
const p4 = promiseWait(4000);
const a = await p1;
const b = await p2;
const c = await p3;
const d = await p4;
var t1 = performance.now()
console.log("Call to doSomething took " + (t1 - t0) + " milliseconds.")
}
test2()

In the first case because of the await before each call to the promiseWait, to even start executing the next call to the promiseWait it needs to wait until the first call to the promiseWait is finished completely. So you see sequential execution.
In the second case you have already invoked all the promiseWait functions before you start awaiting them. So the promiseWait has already started executing, then you are awaiting the results one after another.
Implementation wise in the first scenario, the next call to the setTimeout has to wait until the first setTimeout expires. So the second, third and the fourth timers need to wait until the first timer expires and resolves the promise in order to be scheduled.
In the seconds case you schedule the setTimeout calls one after the other, so the timers are all already queued. Then you are just awaiting for the timers to expire and resolve your promise one by one.

With some more deep dive ... (Inspired by Philip Roberts).
Case 1: SetTimeout triggers one by one
function promiseWait(time) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(new Date().toISOString().split('.')[0].replace('T',' '));
}, time);
});
}
async function test1() {
let timeStamp = new Date();
var t0 = new Date();
console.log("t0",t0)
var a = await promiseWait(1000)
console.log("a",a)
var b = await promiseWait(2000)
console.log("b",b)
var c = await promiseWait(3000)
console.log("c",c)
var d = await promiseWait(4000)
console.log("d",d)
var t1 = new Date();
console.log("t1",t1)
console.log("Call to doSomething took " + (t1 - t0) + " milliseconds."); //takes 10secs
}
test1()
Console: You can notice that sum of each timeout is resulted ~10 Secs.
Case 2: SetTimeout triggers at same time.
function promiseWait(time) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(new Date().toISOString().split('.')[0].replace('T',' '));
}, time);
});
}
async function test1() {
let timeStamp = new Date();
var t0 = new Date();
console.log("t0",t0)
const p1 = promiseWait(1000);
const p2 = promiseWait(2000);
const p3 = promiseWait(3000);
const p4 = promiseWait(4000);
console.log("p1",p1);
console.log("p2",p2);
console.log("p3",p3);
console.log("p4",p4);
const a = await p1;
console.log("a",a);
const b = await p2;
console.log("b",b);
const c = await p3;
console.log("c",c);
const d = await p4;
console.log("d",d);
var t1 = new Date();
console.log("t1",t1)
console.log("Call to doSomething took " + (t1 - t0) + " milliseconds."); //takes 10secs
}
test1()
Console: Here we can notice that timer started together so it resulted with ~ 4 Secs. (Last timer is set at 4 sec).

I this case all 4 promises started at the same time. Therefore its setTimeout timer runs parallel in the background.
The timers have an difference with 1 second so if you put an console log between the awaits you should see around every second a new console log.
function promiseWait(time) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(true);
}, time);
});
}
async function test2() {
var t0 = performance.now()
console.log("putting promises in que");
const p1 = promiseWait(1000);
const p2 = promiseWait(2000);
const p3 = promiseWait(3000);
const p4 = promiseWait(4000);
console.log("promises where added to the que");
const a = await p1;
console.log("1")
const b = await p2;
console.log("2")
const c = await p3;
console.log("3")
const d = await p4;
console.log("4")
var t1 = performance.now()
console.log("Call to doSomething took " + (t1 - t0) + " milliseconds.")
}
test2()
Visualized it looks something like this:
setTimeout(() => {
let divs = document.querySelectorAll("div").forEach(div => {
div.style.setProperty("width", "100%")
})
},500)
div {
height: 30px;
background: red;
margin: 10px;
width: 0px;
transition: width 4s;
color: white
}
<div style="max-width: 100px";>
Promise 1
</div>
<div style="max-width: 200px";>
Promise 2
</div>
<div style="max-width: 300px";>
Promise 3
</div>
<div style="max-width: 400px";>
Promise 4
</div>
Case 1 visualized:
let divs = document.querySelectorAll("div")
let delay = (time) => new Promise(res => setTimeout(res, time));
(async() => {
for(let i = 0; i < divs.length; i++) {
await delay(i + 1000);
divs[i].style.setProperty("width", "100%");
}
})()
div {
height: 30px;
background: red;
margin: 10px;
width: 0px;
transition: width 4s;
color: white
}
<div style="max-width: 100px";>
Promise 1
</div>
<div style="max-width: 200px";>
Promise 2
</div>
<div style="max-width: 300px";>
Promise 3
</div>
<div style="max-width: 400px";>
Promise 4
</div>

Ignore the function call for a specific time

I am looking for an optimal solution for the described problem.
Scenario: There is a function getData() which is being called every second.
If it is called now I want to ignore any call to this function for let say 5 sec.
how best we can achieve this in javascript.

Save last call time and check if passed more than 5 seconds:
var lastCall = 0;
function getData() {
if (lastCall >= moment().subtract(5, 'mins').unix()) {
return;
}
lastCall = moment().unix();
/* rest of code */
}

Add a flag and toggle it after 5 seconds and on each not ignored call:
var shouldIgnore = false;
function getData() {
if (shouldIgnore) {
return;
}
shouldIgnore = true;
setTimeout(() => {
shouldIgnore = false;
}, 5000);
/* rest of code */
}

There are may may using setTimeout you can do. I have give sample example with some util mathod to make it simpler.
Throttle Function:
const throttle = (fn, ms = 0) => {
let lastRunTime;
return function(...args) {
const currTime = +new Date();
if (!lastRunTime || currTime - lastRunTime > ms) {
lastRunTime = +new Date();
fn.apply(this, args);
}
};
};
How to use it:
(async function throttleEx() {
const logTill1Sec = throttle(log, 1 * 1000);
logTill1Sec("deepakt_1");
await new Promise(r => setTimeout(r, 500)); //2 sec virtual delay
logTill1Sec("deepak_t2");
})();
Output:
Mr. deepakt_1
Here you notice, even I call logAfter5Sec multiple times. It execute last one. You can write same way call once.
const throttle = (fn, ms = 0) => {
let lastRunTime;
return function(...args) {
const currTime = +new Date();
if (!lastRunTime || currTime - lastRunTime > ms) {
lastRunTime = +new Date();
fn.apply(this, args);
}
};
};
(async function throttleEx() {
const logTill1Sec = throttle(log, 1 * 1000);
logTill1Sec("deepakt_1");
await new Promise(r => setTimeout(r, 500)); //2 sec virtual delay
logTill1Sec("deepak_t2");
})();
const debounce = (fn, ms = 0) => {
let timeoutId;
return function(...args) {
clearTimeout(timeoutId);
timeoutId = setTimeout(() => fn.apply(this, args), ms);
};
};
const dLog = debounce(log, 200); //ms time
dLog("deepak11");
dLog("deepak22");
dLog("deepak33");
function log(name) {
console.log(`Mr. ${name}`);
}
(async function() {
const logAfter5Sec = debounce(log, 1 * 1000);
logAfter5Sec("deepak");
await new Promise(r => setTimeout(r, 500)); //2 sec virtual delay
logAfter5Sec("deepak2");
})();

How do I make a running total of a variable that changes in JavaScript due to live data?

I need to measure how long the following code calls the vibrate function in seconds and display the seconds which I have working. However, I don't know how to create a running total so that every time vibrate() is called, it both measures the length in seconds and then adds this to a running total.
function goodValue() {
startTime = new Date()
string1 = 'GOOD!!! :)'
displayValue('Angles', string1)
}
var startTime = {}
function badValue() {
var endTime = new Date()
vibrate1(1500)
string2 = 'BAD!!! :('
displayValue('Angles', string2)
var timeDiff = endTime - startTime //in ms
// strip the ms
timeDiff /= 1000
// get seconds
seconds = Math.round(timeDiff);
displayValue('TotalTime', + seconds);
}

This should now work. It's assuming that you call goodAngle() when the app recognizes a good angle, and badAngle() when the app recognizes a bad angle.
var totalTime = 0
var startTime = false
function goodAngle() {
if (startAngle) {
timeDiff = (Date.now() - startTime) / 1000
console.log('timeDiff: %s seconds', timeDiff)
totalTime += timeDiff
console.log('total timeDiff: %s seconds', timeDiff)
string1 = 'GOOD!!! :)'
displayValue('Angles', string1)
displayValue('BadPostureTime', Math.round(timeDiff))
startTime = false // So it can't be called again unless there's a badAngle first
}
}
function badAngle() {
if (!startTime) {
// Only set startTime if there isn't a current timer running
startTime = Date.now()
vibrate1(1500)
string2 = 'BAD!!! :('
displayValue('Angles', string2)
}
}

Skip to the expanded code snippet for the answer to this question. The rest of the examples address measuring other related metrics.
Measuring Each Individual Time
If you want to measure a function's execution time, you can wrap it in another function that uses console.time() and console.timeEnd():
function measure (fn, label = fn.name) {
return function () {
try {
console.time(label)
return fn.apply(this, arguments)
} finally {
console.timeEnd(label)
}
}
}
function delay (ms) {
const now = Date.now()
while (Date.now() - now < ms) { }
}
// wrap the function that needs to be tested
const timedDelay = measure(delay)
timedDelay(100)
timedDelay(10)
This measure() function has a few nice features:
The original function's return value is always preserved
The original function's thrown error is always preserved
If the original function throws an error, the time taken is still logged
The optional label argument is used to label the time that appears in the console
The label defaults to the name of the original function
The original function receives the context and arguments exactly as they were passed
To measure asynchronous functions, you can use the following, which can handle concurrent calls by incrementing a number used within the label in addition to the features above:
function measureAsync (fn, name = fn.name) {
let index = 0
return async function () {
const label = `${name} (${++index})`
try {
console.time(label)
return await fn.apply(this, arguments)
} finally {
console.timeEnd(label)
}
}
}
function delay (ms) {
return new Promise(resolve => {
setTimeout(resolve, ms)
})
}
// wrap the async function that needs to be tested
const timedDelay = measureAsync(delay)
timedDelay(1000)
timedDelay(100)
timedDelay(500)
Measuring Total Time
Using the above two implementations, you can modify them with the Performance API to measure cumulative time instead:
Synchronous
function measureTotal (fn, label = fn.name) {
return Object.assign(function measured () {
try {
performance.mark(label)
return fn.apply(this, arguments)
} finally {
performance.measure(label, label)
const [{ duration }] = performance.getEntriesByName(label, 'measure')
const total = measured.total += duration
performance.clearMarks(label)
performance.clearMeasures(label)
console.log(`${label}: ${total.toFixed(3)}ms`)
}
}, {
total: 0
})
}
function delay (ms) {
const now = Date.now()
while (Date.now() - now < ms) { }
}
// wrap the function that needs to be tested
const timedDelay = measureTotal(delay)
timedDelay(100)
timedDelay(10)
timedDelay(50)
console.log('total:', timedDelay.total)
Asynchronous
function measureTotalAsync (fn, name = fn.name) {
let index = 0
return Object.assign(async function measured () {
const label = `${name} (${++index})`
try {
performance.mark(label)
return await fn.apply(this, arguments)
} finally {
performance.measure(label, label)
const [{ duration }] = performance.getEntriesByName(label, 'measure')
const total = measured.total += duration
performance.clearMarks(label)
performance.clearMeasures(label)
console.log(`${label}: ${total.toFixed(3)}ms`)
}
}, {
total: 0
})
}
function delay (ms) {
return new Promise(resolve => {
setTimeout(resolve, ms)
})
}
// wrap the async function that needs to be tested
const timedDelay = measureTotalAsync(delay)
Promise.all([
timedDelay(1000),
timedDelay(100),
timedDelay(500)
]).finally(() => {
console.log('total:', timedDelay.total)
})
References
performance.mark()
performance.measure()
performance.getEntriesByName()

It is hard to tell what your code is supposed to do but I would advise making
a function which would wrap around your vibrate1 implementation.
The measureTime function takes a function as an argument (in your case vibrate) and
returns a function which has a property totalTime that records the execution
time. Note that it uses performance.now() instead of a Date object. See
https://developer.mozilla.org/fr/docs/Web/API/Performance/now for reference.
function measureTime(fn) {
const returnedFn = function measuredFunction (arg) {
const start = performance.now();
fn(arg);
const end = performance.now();
returnedFn.totalTime = returnedFn.totalTime + ((end - start) / 1000);
};
returnedFn.totalTime = 0;
return returnedFn;
}
const measuredVibrate = measureTime(vibrate1);
displayValue(measuredVibrate.totalTime);

How to handle async/await calls inside a setTimeout() block?

I have a process that runs at a specific interval, let's say it runs on the every 10th second of the minute. It is a recursive function so at the end of every 10 seconds, it will call itself. This is working so far.
Inside this timer function, I have an async/await call to an API. Basically what it does is, it makes the API call, gets the data and that data is pushed to a client once it is %100 complete.
The problem is that if that async/await call takes longer than the interval of my timer, I am starting to get overlaps.
So, this is a bit of a design question. I have found the solution by using a global variable inside my API call wrapper function.
var REQUEST_CYCLE_ACTIVE = false;
or
var REQUEST_CYCLE_ACTIVE = true;
Inside the timer, I can skip the recursion if the API call is unfinished and it will try on the next interval.
This works. But I am curios to know if there is a more elegant way to solve this. I am also providing an example node.js application which demonstrates the issue and the solution.
// A simple function to simulate resource delays.
const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));
// Construct a time string for debug purposes.
const getTime = () => {
var now = new Date();
var h = now.getHours().toString().padStart(2, '0');
var m = now.getMinutes().toString().padStart(2, '0');
var s = now.getSeconds().toString().padStart(2, '0');
const timeSignature = h + ':' + m + ':' + s;
return timeSignature;
}
// Update
// This is the request wrapper.
const update = async () => {
REQUEST_CYCLE_ACTIVE = true;
let result;
try {
result = await someFakeAPI();
} catch (err) {
throw err;
}
let timeSignature = getTime();
console.log(`\t\t(REQUEST) update() is done. Here is the result:`);
console.log('\t\t', result)
// Once the data is %100 collected here (there are retries etc.)
// we make a call to the websocket and force-push the data to all
// of the connected clients.
// PUSH TO CLIENTS()
REQUEST_CYCLE_ACTIVE = false;
};
// The core mock API call function.
async function someFakeAPI() {
// Emulate an asynchroneous fetch.
console.log('\t\t(REQUEST) Fetching data ...')
// 12000 miliseconds (12 sec) is longer than our timer call.
// There will be an overlap.
await delay(12000);
let result = 0.6; // Change to 0.4 to trigger a failed fetch.
if (result < 0.5) {;
return '__FAIL__';
} else {
return {name: 'apple', price: '1234.12', time: 1549926859970};
}
}
// Just an initial API call to get things started.
async function sendExchangeRequest()
{
let result;
try {
result = await someFakeAPI();
} catch (err) {
throw err;
}
return result;
}
// runClock {{{1
const runClock2 = async () => {
let next_update_seconds;
// This is our interval, the recursive function will be called on every n'th second of the minute.
// For example, an interval of 10 means, the calls will be placed at 22:11:00, 22:11:10, 22:11:20 etc.
var interval = 10; //seconds
var date = new Date();
let current_seconds = date.getSeconds();
let buffer = 60 % interval;
let border = (60 - buffer);
// Interval calculations.
if (current_seconds <= border) {
if ((current_seconds % interval) == 0) {
next_update_seconds = interval;
} else {
let distance = (border - current_seconds);
let slice = (distance % interval);
next_update_seconds = slice;
}
} else {
next_update_seconds = (60 - current_seconds);
}
let next_update_milliseconds = (next_update_seconds * 1000);
var timeToNextTick = (next_update_milliseconds);
let timeSignature = getTime();
console.log(`[4] <${timeSignature}> Starting runClock(), time to next Async REQUEST: ${timeToNextTick}ms`);
setTimeout(function() {
let timeSignature = getTime();
console.log(`\t(${timeSignature}) Time is up, done waiting. Async REQUEST will be called.`);
if(REQUEST_CYCLE_ACTIVE){
console.log(`\t(${timeSignature}) Previous Async REQUEST already running. Skipping ...`);
}else{
console.log(`\t(${timeSignature}) Previous Async REQUEST is complete. Running a new one ...`);
// MAKE THE ASYNC API CALL HERE.
update();
}
// Recursion
console.log(`\t(${timeSignature}) Start runClock() again.`);
runClock2();
}, timeToNextTick);
};
var REQUEST_CYCLE_ACTIVE = false;
(async () => {
console.log('[1] Make the request:')
try {
response = await sendExchangeRequest();
console.log('[2] Report the result:\n\t', response)
console.log('[3] Start the clock cycle.');
runClock2();
} catch(error) {
console.log('FAILED:', error)
}
})();
If you have issues with the included code, here is the REPL link: AsyncConcepts2.repl.run
Finally, a gif demonstrating the example: