如何在给定点停止此功能？

Question

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>

大家好！目标：在开始写入数字之前停止写入数字的函数没有评论的东西程序可以工作，但它不会停止，所以我想阻止它执行用布尔值写入数字的函数。离开按钮时必须停止为什么它不起作用？还有哪些选择？

Answer 1

为什么它不起作用：

您对事件在 <input type="button"> 上的行为方式有疑问。
出于某种原因，当您单击按钮时，onMouseLeave 事件正在触发，即运行 end()。反过来，这会将 booli 设置为 false，这就是为什么感觉您的布尔值有问题的原因。
您也永远不会在您共享的代码中的任何地方将 booli 设置为 true。

booli 在 onMouseDown 之前设置为 false 并且 start() 永远不会被调用。

我在你的声明中将 booli 设置为 true 并在你的代码中添加了一些日志语句来说明我的意思：

var counter;
var count = 0;
var booli = true;
console.log("booli=", booli);

window.onload = function() {
  var x = document.getElementsByClassName('banana')
  var i;
  for (i = 0; i < x.length; i++) {
    let y = x[i];
    x[i].onmousedown = debounce(function() {
      console.log("onMouseDown, booli is", booli);
      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() {
  console.log("onMouseLeave, setting booli=false");
  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>

Answer 2

你有几个问题。 550 毫秒的超时延迟导致 onmouseleave 在去抖动代码之前触发。此外，您的 booli 被设置在错误的位置并且从未被重置为 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>

如何在给定点停止此功能？

How to stop this function at the given point?

javascript

boolean

function

execution