Procurando uma forma de receber dados dentro de um setTimeout
, para efetuar o que precisa e ou parar sua repetição, pensei em criar uma promise, para ao receber o then ou o catch desta função, eu parar o time out ou não, continuar tentando.
procurando se isso era viável ou perigoso, achei esta Thread https://stackoverflow.com/a/55760290/2741415 que mostra uma forma que eu achei muito bacana, criando um Observable.
não quero entrar no mérito de se é certo ou errado mas sim queria entender mais sobre este modo.
uma coisa que eu não consegui reproduzir foi o Stop sem utilizar o botão, eu fiz algumas modificações para por exemplo; começar apenas quando eu quero e chamar uma função que irá responder com um "pare ou continue", mas ainda não obtive sucesso em a parar.
montei neste Codepen https://codepen.io/flourigh/pen/abNMOya os testes que fiz, o trecho do amigo funciona bem e o meu trecho só faz Rodar o Looping mas ainda não faz parar.
Como consigo parar a repetição dele? dentro do retorno onde está o console.log ou em uma função fora do escopo que eu possa a chamar de outra forma porém com o gatilho ainda dentro da repetição ou também dentro e fora.
/** @Bloco original do criador */
class Observable {
constructor(exec) {
this.listeners = new Set();
exec({
next: (value) => this.listeners.forEach(({ next }) => next && next(value)),
error: (err) => this.listeners.forEach(({ error }) => error && error(err)),
complete: () =>
this.listeners.forEach(({ complete }) => complete && complete())
});
}
subscribe(listeners) {
this.listeners.add(listeners);
return {
unsubscribe: () => this.listeners.delete(listeners)
};
}
}
// Create an Observable instead of a Promise;
const interval = new Observable(({ next }) => {
setInterval(() => next("Hello"), 1000);
});
// Subscribe to that Observable
const subscription = interval.subscribe({
next: (data) => console.log(data)
});
// Optionally use the returned subscription object to stop listening
document
.querySelector("button")
.addEventListener("click", subscription.unsubscribe);
<button>Stop listening</button>
<br>
<a href="https://stackoverflow.com/a/55760290/2741415">https://stackoverflow.com/a/55760290/2741415</a>
/** @Bloco modificado por mim */
class Observable {
constructor(exec) {
this.listeners = new Set();
exec({
next: (value) => this.listeners.forEach(({ next }) => next && next(value)),
error: (err) => this.listeners.forEach(({ error }) => error && error(err)),
complete: () =>
this.listeners.forEach(({ complete }) => complete && complete())
});
}
subscribe(listeners) {
this.listeners.add(listeners);
return {
unsubscribe: () => this.listeners.delete(listeners)
};
}
}
// Create an Observable instead of a Promise;
const interval = new Observable(({ next }) => {
setInterval(() => next("Hello"), 1000);
});
// Subscribe to that Observable
function subscription() {
interval.subscribe({
next: (data) => console.log(data) // Como posso travar a execução aqui dentro, diretamente quando receber um dado esperado?
});
}
// Start a Subscription
document.getElementById("start").addEventListener("click", subscription);
// Stop a Subscription
document
.getElementById("stop")
.addEventListener("click", subscription.unsubscribe); // Ou como posso chamar uma outra função de stop que pode ser um botão ou não?
<button id="start">Start listening</button>
<br>
<button id="stop">Stop listening</button>