javascript - 如何确保多个setinterval函数不互相干扰

Question

我在一个页面上创建了两个计算器，第二个可以正确计算，但第一个不能。我相信这是由于我的两个 setinterval 函数相互干扰造成的。如何让这两个功能协同工作。

var x = document.getElementById("x");
var d = document.getElementById("d");
var xstored = x.getAttribute("data-in");
setInterval(function() {
  if (x == document.activeElement) {
    var temp = x.value;
    if (xstored != temp) {
      xstored = temp;
      x.setAttribute("data-in", temp);
      calculate();
    }
  }
}, 10);

function calculate() {
  d.innerHTML = x.value * .62;
}

var a = document.getElementById("a");
var b = document.getElementById("b");
var astored = a.getAttribute("data-in");
var c = document.getElementById("c")

setInterval(function() {
  if (a == document.activeElement) {
    var temp = a.value;
    if (astored != temp) {
      astored = temp;
      a.setAttribute("data-in", temp);
      calculate();
    }
  }
}, 50);

function calculate() {
  b.innerHTML = a.value * .62;
  c.innerHTML = Math.round(a.value * .0103);
}

function tisNumberKey(evt) {
  var charCode = (evt.which) ? evt.which : event.keyCode
  if (charCode > 31 && (charCode < 48 || charCode > 57))
    return false;

  return true;
}

<table style="width:100%;text-align: center;">
  <tbody>
    <tr>
      <td style="width:50%;background:none;">
        <p style="margin: 0px;font-weight: bold;font-size: 35px;">Lawn Square Footage</p>
      </td>
      <td style="width:50%;font-size: 35px;font-weight: bold;background:none">
        <p style="margin: 0px;font-weight: bold;font-size: 35px;">Water Usage</p>
      </td>
    </tr>
    <tr>
      <td style="width:50%;">
        <input id="x" onkeypress="return isNumberKey(event)" data-in="" type="text" style="height: 250px;margin-top: 10px;width: 250px;text-align: center;font-size: 100px" />
      </td>
      <td style="width:50%;font-size: 100px;"><span id="d" class="counter"></span>
      </td>
    </tr>
  </tbody>
</table>
<table style="width:100%;text-align: center;">
  <tbody>
    <tr>
      <td style="width:33%;background:none;">
        <p style="margin: 0px;font-weight: bold;font-size: 35px;">Lawn Square Footage</p>
      </td>
      <td style="width:33%;font-size: 35px;font-weight: bold;background:none">
        <p style="margin: 0px;font-weight: bold;font-size: 35px;">Water Usage</p>
      </td>

    </tr>
    <tr>
      <td style="width:33%;">
        <input id="a" onkeypress="return tisNumberKey(event)" data-in="" type="text" style="height: 250px;margin-top: 10px;width: 250px;text-align: center;font-size: 100px" />
      </td>
      <td style="width:33%;font-size: 100px;"><span id="b" class="counter"></span>
      </td>
      <td style="width:33%;">
        <p style="font-size:50px; font-weight:bold;">Your lawn takes a &nbsp;<span id="c"></span>&nbsp; hour shower
      </td>
    </tr>
  </tbody>
</table>

http://codepen.io/anon/pen/qdyPjE

Answer 1

不能有 2 个具有相同名称/签名的函数。您有两次 calculate()，您应该命名一个不同的名称，例如 calculate1()。您正在用第二个函数覆盖第一个 calculate() 函数，这就是为什么第二个函数有效但第一个函数不起作用...