How to stop this function at the given point?

var counter;
var count = 0;
//var booli = new Boolean("false");

window.onload = function() {
  var x = document.getElementsByClassName('banana')
  var i;
  for (i = 0; i < x.length; i++) {
    let y = x[i];
    console.log(y);
    x[i].onmousedown = debounce(function() {
      //if(booli)
      //{
      start(y.className, y.value.replace(/\s/g, ''));
      //};
    }, 550);
  };
}

function debounce(a, b) {
  return function() {
    var timer;
    clearTimeout(timer);
    timer = setTimeout(function() {
      a();
    }, b);
  };
}

function start(clicked_className, cha) {
  counter = setInterval(function() {
    add(clicked_className, cha);
    count++;
  }, 90);
}

function end() {
  //booli=false;
  clearInterval(counter);
}

function add(clicked_className, cha) {
  window.document.numeri.outpu.value =
    window.document.numeri.outpu.value + cha;
}

#put {
  width: 700px;
  height: 18px;
  font-size=14pt;
}

<!DOCTYPE html>
<html onmouseup="end()">

<head>
  <meta charset="UTF-8">
</head>

<body>
  <form name="numeri">
    <input type="text" id="put" name="outpu">
    <input type="button" id="apple" class="banana" value="  1  " onmouseleave="end()">
    <input type="button" id="ada" class="banana" value="  2  " onmouseleave="end()">
    <input type="button" id="aded" class="banana" value=" 3  " onmouseleave="end()">

  </form>
</body>

</html>

Hey guys! Goal: stop the function that writes numbers before it starts writing numbers without the commented things the program works, but its not stopping, so i wanted to stop it from executing the function that writes numbers with a boolean. It has to stop when leaving the button Why does it not work? And what are the alternatives?

Solution

You had a couple of issues. The 550ms delay on the timeout is causing the onmouseleave to fire before the code in debounce. Also your booli was being set in the wrong spot and was never being reset to true.

  let counter;
  let count = 0;
  let booli = false;

  window.onload = function() {
    let x = document.getElementsByClassName('banana')
    let i;
    for (i = 0; i < x.length; i++) {
      let y = x[i];
      console.log(y);
      x[i].onmousedown = debounce(function() {          
        start(y.className, y.value.replace(/\s/g, ''));          
      }, 1);//550
    }
  }

  function debounce(a, b) {
    return function() {
      let timer;
      clearTimeout(timer);
      booli = true;
      timer = setTimeout(function() {
        if(booli)
        {
          a();
        }
        else
        {
          clearInterval(counter);
        }
      }, b);
    };
  }

  function start(clicked_className, cha) {
    counter = setInterval(function() {
      add(clicked_className, cha);
      count++;
    }, 90);
  }

  function end() {
    booli = false;
    clearInterval(counter);
  }

  function add(clicked_className, cha) {
    window.document.numeri.outpu.value =
      window.document.numeri.outpu.value + cha;
  }

#put{
width = 700px;
height: 18px;
font-size=14pt;
}

<!DOCTYPE html>
<html onmouseup="end()">

<head>
  <meta charset="UTF-8">
</head>

<body>
  <form name="numeri">
    <input type="text" id="put" name="outpu" style { width = 700px; height: 18px; font-size=14pt; }>
    <input type="button" id="apple" class="banana" value="  1  " onmouseleave="end()">
    <input type="button" id="ada" class="banana" value="  2  " onmouseleave="end()">
    <input type="button" id="aded" class="banana" value=" 3  " onmouseleave="end()">

  </form>

</body>

</html>