There are already a few javascript wait until questions on stackoverflow. But none of them address a wrapper function.
Could anyone provide wait until functionality and then wrap it in a function like:
WaitUntilThen(condition,functiontocall);
for example:
WaitUntilThen($('#myid').css('display')=='none',PrintCalculations());
This can't be done literally. Arguments are evaluated before the function is called, so WaitUntilThen would just receive either true or false; depending on what the condition initially evaluated to.
Interpreting this question as literally as possible, I think you'd need to wrap the condition in a function, then have WaitUntilThen poll the function. Something kind of like:
function WaitUntilThen(conditionF, thenF, pollIntervalMs = 500) {
const timer = setInterval(() => {
const result = conditionF();
if (result) {
clearInterval(timer);
thenF();
}
}, pollIntervalMs)
}
WaitUntilThen(() => $('#myid').css('display')=='none', PrintCalculations);
This is a terrible solution though. I would simply try to change how you're approaching the problem.
I was going to post a implementation closer to Pedro's answer, since returning a promise allows you to properly sequence code. It felt off though since if you're returning a promise, there's no need for thenF, since the caller could just use await/.then on the promise to do whatever they want after. If you're willing to abandon the callback argument, I'd go with what Pedro wrote, but just expect the caller to call PrintCalculations
function WaitUntilThen(conditionF, pollIntervalMs = 500) {
return new Promise((resolve) => {
const timer = setInterval(() => {
const result = conditionF();
if (result) {
clearInterval(timer);
resolve();
}
}, pollIntervalMs);
});
}
(async () => {
await WaitUntilThen(() => $('#myid').css('display')=='none');
PrintCalculations()
});
display also trigger PrintCalculations, or have that code emit some event that listeners could subscribe to. I think this way of approaching the problem only makes sense in cases where you don't have any control over the code (Userscripts to alter pages written by someone else).callback/thenF. The function at that point should just poll the condition then resolve, and then the caller could do whatever they want after that point. I posted the code I did because it was closer to your literal question.function WaitUntilThen(condition, callback) {
return new Promise(resolve => {
const intervalId = setInterval(() => {
if (condition()) {
clearInterval(intervalId);
resolve();
}
}, 100);
}).then(callback);
}
Your example calling code evaluates both the condition and the dependent function only once, and also does so immediately, without waiting.
If you are able to change the calling code to this:
WaitUntilThen(
() => $('#myid').css('display') == 'none', // Condition function
PrintCalculations // Function reference
);
Then those problems are gone, and this WaitUntilThen function will evaluate them in the way you desire:
function WaitUntilThen(fnCondition, fnToCall) {
const checkCondition = () => {
if (fnCondition())
fnToCall();
else
setTimeout(checkCondition, 100);
};
checkCondition();
}
It uses a fixed interval of 100 ms, if needed you could make that value a parameter as well.
There are much better ways to achieve what you want but here is a function that accepts functions, booleans and promises as conditions and only calls back the function once the condition is satisfied:
function waitUntil(condition, callback, interval = 100) {
const tryMeetingCondition = (result) => {
if (result === true) {
callback(result);
clearInterval(intervalId);
}
}
const checkCondition = () => {
if (condition instanceof Promise) {
condition.then(tryMeetingCondition);
} else if (typeof condition === "function") {
const result = condition();
if (result instanceof Promise) {
result.then(tryMeetingCondition);
} else {
tryMeetingCondition(result);
}
} else {
tryMeetingCondition(condition);
}
}
const intervalId = setInterval(checkCondition, interval);
}
How to use:
const callback = () => {
console.log("Called back");
}
const conditionOne = Promise.resolve(true);
waitUntil(conditionOne, callback);
const conditionTwo = () => {
let condition = false;
return () => {
if (!condition) {
condition = true;
return Promise.resolve(false);
}
return Promise.resolve(condition);
}
};
waitUntil(conditionTwo(), callback);
const conditionThree = () => {
let color = 'red';
let startTime = null;
return () => {
if (!startTime) {
startTime = Date.now();
}
const elapsedTime = (Date.now() - startTime) / 1000;
if (elapsedTime >= 10) {
color = 'blue';
}
return color === 'blue';
};
};
waitUntil(conditionThree(), callback);
const conditionFour = () => true;
waitUntil(conditionFour, callback);
conditionto be? An observable? A promise? A literal condition wouldn't work since that would be evaluated immediately.CalculationsDone(); PrintCalculations();if the first function returns a promiseCalculationsDone(),then(() => PrintCalculations()). If it doesn't return a promise then figure it out - maybe it takes a callback. If it doesn't, then you're out of luck. It's not at all clear what you're trying to do and what problem you're encountering that's not already solved.==will evaluate immediately. You would need to, at the very least, wrap the condition in a function. Then,WaitUntilThenwould need to poll the function repeatedly until it returned true. Or make the condition a promise, in which case the solution is justthen.