How to Stop This Observable "unsubscribe"

Question

Looking for a way to receive data inside a setTimeout, to do what you need and or stop your replay, I thought about creating a file, so when I receive the then or catch of this function, I stop the time out or not, keep trying.

looking for whether this was viable or dangerous, I found this Thread https://stackoverflow.com/a/55760290/2741415 that shows a way that I found very cool, creating an observable.

I don’t want to get into the merit of whether it’s right or wrong but rather wanted to understand more about this way.

one thing I could not reproduce was the Stop without using the button, I made some modifications to for example; start only when I want and call a function that will respond with a "stop or continue", but I have not yet succeeded in stopping it.

I rode this Codepen https://codepen.io/flourigh/pen/abNMOya the tests I did, the friend section works well and my excerpt only makes Run Looping but still does not stop.

How do I stop the replay? inside the return where the console.log is or in a function outside the scope that I can call it otherwise but with the trigger still inside the repetition or inside and outside.

/** @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>