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个具有相同名称/签名的功能。您有int space[4]; /** * Get the number of elements in the space array; this way we * don't have to hardcode a size in our loop */ size_t numElements = sizeof space / sizeof space[0]; for ( i = 0; i < numElements; i++ ) { int done = 0; do { printf( "Gimme an input (0 to quit): " ); fflush( stdout ); if ( scanf( " %c%*[^\n]", &space[i] ) != 1 ) { fprintf( stderr, "Error reading input, bailing...\n" ); exit( 0 ); } done = isValid( space[i] ); if ( !done && space[i] != '0' ) fprintf( stderr, "Invalid input, try again\n" ); } while ( !done && space[i] != '0' ); if ( space[i] == '0' ) { fprintf( stderr, "Got a '0' for input, quitting...\n" ); exit( 0 ); } }两次，应该命名一个不同的calculate()。你用第二个函数覆盖了第一个calculate1()函数，这就是为什么第二个函数可以工作但第一个函数没有...

Answer 2

多个setInterval函数将从不相互干扰，您的脚本在单个线程上运行。这些函数排队并一个接一个地执行。您不必担心同时尝试相同数据的两个不同功能。

您的实际问题似乎是您有两个具有相同名称的功能，正如另一个答案中已经指出的那样。

如何确保多个setinterval函数不受干扰

2 个答案: