How to stop a function on button click in react JS

Question

I am calling a function from sort.jsx

<button onClick={() => onBubbleSort()}>Bubble sort</button>

and function definition is:

BubbleSort() {
    // console.log(this.state.animationSpeed)
    let bar = document.getElementsByClassName("arrayElement");
    let mySortedArray = bubble.bubblesort(this.state.array, bar, (arr) => {
      this.setState({ array: arr });
    },this.state.animationSpeed);
  }

Which is then calling a bubble sort function in another file bubbleSort.js

async function bubblesort(array1, element, setState, speed) {
  let compareSpeed = speed * 1.5;
  let swapSpeed = speed * 2;
  let isLessSpeed = speed * 3;
  let temp;
  let array = array1;
  document.getElementById("captions").innerText =
    "Lets's start sorting with Bubble sort!!!";
  await pauseIt();
  for (let i = 0; i < array.length - 1; i++) {
    for (let j = 0; j < array.length - 1 - i; j++) {
      await compare(element[j], element[j + 1], compareSpeed);
      if (array[j] > array[j + 1]) {
        await isLess(element[j], element[j + 1], isLessSpeed);
        temp = array[j];
        array[j] = array[j + 1];
        array[j + 1] = temp;
        await swap(element[j], element[j + 1], swapSpeed);
        unselect(element[j], element[j + 1],compareSpeed);
        setState(array);
      } else {
        unselect(element[j], element[j + 1],compareSpeed);
      }
    }
    let k = array.length - i - 1;
    element[k].style.backgroundColor = "green";
    if (speed >= 500) await success(i + 1);
  }
  element[0].style.backgroundColor = "green";
}

I want to stop the execution of this function on a buttoon click.

You could place a return on a certain condition within the funtion via some flag and have the condition fulfilled once you click a button.. — iLuvLogix, Aug 04 '22 at 16:34
This is pretty convoluted. Why not use the builtin `Array#sort` rather than rolling your own? If you're animating algorithms, run the algorithm a step at a time without loops and emit each step. If you're using React and calling `document.anything`, 99% of the time you're doing something wrong. Provide more context to avoid the [xy problem](https://meta.stackexchange.com/questions/66377/what-is-the-xy-problem/233676#233676). — ggorlen, Aug 04 '22 at 17:18
Just so you know, you're setting `let array = array1;` and I assume you want to copy that array. However, you're not cloning the array, you're in fact modifying it directly. You're saying this variable is a reference to your actual array. Everything occurring in the for loops are then directly changing `this.state.array`. This can lead to unexpected side effects and might make sense to use map or a similar function so it's not actually changing `this.state.array` — Dom, Aug 04 '22 at 20:01

How to stop a function on button click in react JS

0 Answers0