0

I implemented a project for sorting algorithms visualization. It is a simple static website made using HTML, CSS and JavaScript. It uses DOM manipulation to visualize how an algorithm looks like in working. There are separate buttons for each algorithm and an event listener attached to each of them, which executes respective sorting algorithms.

Now, if I have to reset the page when any function is in execution, performing the sorting visualization, I have to simply refresh the page. But instead, I want to add a reset / abort button, which do the same thing as the page refresh do, mainly stopping the function in execution performing sorting visualization. There are recursive functions for Merge and Quick Sort as well.

I tried googling for the same and found this article, but it didn't solved my problem.

I've also found about setTimeout(fun, ms) & clearTimeout(id), but did not understood how it would work in my case with recursive functions.

So, I want to ask, how to implement such a button which has the same functionality like a page refresh button do.

iamujj15
  • 1
  • 4
  • Your question is somewhat convoluted in the "would stop all functions in execution" - Do you mean something to remove previously added event handlers or something else? – Mark Schultheiss Jul 13 '23 at 12:12
  • I mean, for ex. I have a recursive function, then there would be multiple recursive call in the stack. That's why I added all functions in execution. Am I wrong technically? But what I actually mean is, even if there are multiple recursive calls, then all of them should stop after I click this reset button. – iamujj15 Jul 13 '23 at 12:20
  • This is really starting to sound like an XY problem - https://en.wikipedia.org/wiki/XY_problem Perhaps re-visit your goal here rather than a specific solution. Also https://xyproblem.info/ – Mark Schultheiss Jul 13 '23 at 12:34
  • I updated the problem statement. I hope it delivers the actual problem I'm having. – iamujj15 Jul 13 '23 at 12:56
  • There is no simple way to stop all code (such a function would at first stop itself, then what?). You actually need to change the code of your visualiser, or even the code of each algorithm, so that it will stop on its own when a global flag is set or something like that. If you need help with that, you'll need to post that code, in particular the asynchronous bits. – Bergi Jul 13 '23 at 13:31
  • OK I got it. For now, as @mfydev suggested location.reload() should work in my case. Anyways, thanks for the reply. – iamujj15 Jul 13 '23 at 14:13
  • @iamujj15 But you said in your question that you didn't just want to refresh the page? – Bergi Jul 13 '23 at 14:24
  • Yes. But for now, I would go with this workaround, and will later update my code, as you suggested. – iamujj15 Jul 13 '23 at 15:36

1 Answers1

0

I'm not sure if that's what you want, but you can use built-in javascript function:

location.reload();

This function literally reloads entire window.

Or

You can insert code below in specific places in your functions to quit;

if(myStopVar === 1) return;

you set a variable at start of script to 0 and when you'll need to stop (e.g. your 'stop' button), just set value of variable to 1.

let myStopVar = 0;

stopButton.addEventListener('click',()=>{
  myStopVar = 1;
});

// Some code with if condition ^

Example:

let myStopVar = 0;

document.querySelector('button').addEventListener('click',()=>{
  myStopVar = 1;
});

let out = document.querySelector('div');

async function abc() {
  out.innerHTML="I'm doing something... I'll be able to stop after 5 seconds..."
  await new Promise(r=>{
    setTimeout(r,5000);
  })
  if(myStopVar === 1) {
    out.innerHTML='You stopped me!'
    return;
  }
  out.innerHTML="I ended!"
}

abc();
<button>Press to Stop</button>
<div></div>

Hope this helps!

MfyDev
  • 439
  • 1
  • 12