Estoy llamando a una función de sort.jsx

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

y la definición de la función es:

 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); }

Que luego está llamando a una función de clasificación de burbujas en otro archivo 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"; }

Quiero detener la ejecución de esta función con un clic de botón.