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

【问题标题】：How to stop this function at the given point?如何在给定点停止此功能？
【发布时间】：2020-07-17 15:03:46
【问题描述】：

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>

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

【问题讨论】：

代码失败的原因是什么？你有错误吗？意想不到的结果？这可能是打开浏览器调试工具并使用开发控制台和脚本调试器的好时机。
使用布尔变量有什么问题？顺便说一句，new Boolean("false") 应该只是 false。
你能用break声明吗？

标签： javascript function boolean execution

【解决方案1】：

你有几个问题。超时的 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>

【讨论】：

【解决方案2】：

为什么它不起作用：

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

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

我在您的声明中将 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>

【讨论】：