function - Javascript Interval continues endless without conditions met

Question

Welcome To Ask or Share your Answers For Others

function - Javascript Interval continues endless without conditions met

asked Jan 31, 2022 in Technique[技术] by 深蓝 (71.8m points)

var counter;
var count = 0;

var equalsPressed = false;
var dritter = false;
var array = new Array();

window.onload = function() {
  let x = document.getElementsByClassName('zahlen')
  let i;
  for (i = 0; i < x.length; i++) {
    let y = x[i];
    x[i].addEventListener('mousedown', function() {
      add(this.className, this.value.replace(/s/g, ''));
    }, true);
    //x[i].addEventListener(mousedown,function('Hi')
    x[i].onmousedown = debounce(function() {
      start(y.className, y.value.replace(/s/g, ''));
    }, 200);
  }
}

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, Zeichen) {
  counter = setInterval(function() {
    add(clicked_className, Zeichen);
    count++;
  }, 370);
}

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


function Check(Eingabe) {
  // indexof=suche in "0123456789[]()-+*%/" nach den chars der eingabe(0 bis 1 kleiner als l?nge (also alle)) und schaue an welcher position im string diese sind.wenn position kleiner0(also nicht vorhanden)
  // dann return false, ansonsten alles gut
  var inhalt = "0123456789[]().-+*%/=e";
  for (var i = 0; i < Eingabe.length; i++)
    if (inhalt.indexOf(Eingabe.charAt(i)) < 0) return false;
  return true;
}


function Ergebnis() {
  var z = document.getElementById("Historie");
  z.style.display = "block";
  var ausg = 0;

  if (equalsPressed && Check(window.document.Rechner.Display.value)) {
    var o = window.document.Rechner.Display2.value;
    var p = window.document.Rechner.Display.value;
    p = p.replace("=", '');

    const chars = ["+", "-", "*", "/"];
    var last;

    for (const rechenarten of o) {
      if (chars.includes(rechenarten)) {
        last = rechenarten;
      }

    }
    //lastIndexOf z?hlt von hinten und f?ngt bei o.length - 1 also der letzten Position an
    //und sucht last, also die am weitesten hinten vorkommende der Rechenarten
    o = o.slice(o.lastIndexOf(last, o.length - 1), o.lenght);

    ausg = eval(p + o);

    ausg = ausg.toFixed(getDecimalPlaces(p));
    window.document.Rechner.Display.value = ausg;
    window.document.Rechner.Display2.value = window.document.Rechner.Display2.value + o;
    dritter = true;
  } else {
    var y = 0;
    var x = 0;

    if (Check(window.document.Rechner.Display.value))
      y = window.document.Rechner.Display.value;
    window.document.Rechner.Display2.value = y;
    ausg = eval(window.document.Rechner.Display.value);
    ausg = ausg.toFixed(getDecimalPlaces(y)); //
    window.document.Rechner.Display.value = "=" + ausg;
  }
}

function getDecimalPlaces(numb) {
  var highest = 0;
  var counter = 0;
  for (a = 0; a < numb.length; a++) {
    if (numb.charAt(a - 1) == ".") {
      do {
        counter++;
        a++;
      }
      while (!isNaN(numb.charAt(a)) && a < numb.length);
    }
    if (counter > highest) {
      highest = counter;
    }
    counter = 0;
  }
  return highest;
}


function add(clicked_className, Zeichen) {
  if (equalsPressed == false && clicked_className == 'zahlen') {
    window.document.Rechner.Display.value =
      window.document.Rechner.Display.value + Zeichen;
  } else if (dritter && equalsPressed && clicked_className == 'zahlen') {
    var array = new Array();
    array.push(window.document.Rechner.Display2.value + "=" +
      window.document.Rechner.Display.value);

    var myTableDiv = document.getElementById("Historie")
    var table = document.createElement('TABLE')
    var tableBody = document.createElement('TBODY')
    table.border = '0';
    table.appendChild(tableBody);
    var tr = document.createElement('TR');
    tableBody.appendChild(tr);

    var td = document.createElement('TD')
    td.width = '275';
    td.style.textAlign = "right";
    td.appendChild(document.createTextNode(array[0]));

    tr.appendChild(td);
    myTableDiv.appendChild(table)


    window.document.Rechner.Display2.value = "";
    window.document.Rechner.Display.value = "";
    window.document.Rechner.Display.value =
      window.document.Rechner.Display.value + Zeichen;
    equalsPressed = false;

  } else if (equalsPressed && clicked_className == 'zahlen') {
    window.document.Rechner.Display2.value = "";
    window.document.Rechner.Display.value = "";
    window.document.Rechner.Display.value =
      window.document.Rechner.Display.value + Zeichen;
    equalsPressed = false;

  } else if (clicked_className == 'ops') {
    var x;
    window.document.Rechner.Display.value = window.document.Rechner.Display.value.replace("=", '');
    window.document.Rechner.Display.value =
      window.document.Rechner.Display.value + Zeichen;
    equalsPressed = false;
  }
}



function gleichPressed() {
  equalsPressed = true;
}


function backspace() {
  var abschneiden = window.document.Rechner.Display.value;
  for (var i = 0; i < abschneiden.length; i++) {
    var output = abschneiden.slice(0, -1);
    window.document.Rechner.Display.value = output;
  }
}

function ausgabe() {

  if (equalsPressed) {

  } else {

    array.push(window.document.Rechner.Display2.value +
      window.document.Rechner.Display.value);
    console.log(array);

    var myTableDiv = document.getElementById("Historie")
    var table = document.createElement('TABLE')
    var tableBody = document.createElement('TBODY')
    table.border = '0';
    table.appendChild(tableBody);
    var tr = document.createElement('TR');
    tableBody.appendChild(tr);

    var td = document.createElement('TD')
    td.width = '275';
    td.style.textAlign = "right";
    td.appendChild(document.createTextNode(array[0]));

    tr.appendChild(td);
    myTableDiv.appendChild(table)
  }
}

body {
  font-family: "Century Gothic", CenturyGothic, Geneva, AppleGothic, sans-serif;
}

.button,
.ops,
.zahlen,
.sonst,
.istgleich {
  background-color: #A4A4A4;
  background: linear-gradient(240deg, grey, white);
  color: black;
  width: 60px;
  text-align: center;
  font-family: System, sans-serif;
  font-size: 100%;
}

.button:hover,
.zahlen:hover,
.sonst:hover,
.ops:hover,
.istgleich:hover {
  color: #2E2E2E;
  background-color: #FAFAFA;
  background: linear-gradient(30deg, darkgrey, lightgrey, grey);
  ;
}

.display {
  width: 100%;
  text-align: right;
  font-family: System, sans-serif;
  font-size: 100%;
}

#Historie {
  background: linear-gradient(30deg, silver, white, grey);
  ;
  border: 5px outset;
  float: left;
  text-align: right;
}

#eins {
  background: linear-gradient(30deg, silver, grey, DimGray);
  ;
}

#zwei {
  background: linear-gradient(90deg, silver, grey);
  ;
}

#tabelle {
  width: 300px;
  height: 235px;
  float: left;
}

<html onmouseup="end()">

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

<body bgcolor="#FFFFE0" text="#000000">
  <form name="Rechner" action="" onSubmit="Ergebnis();return false;">
    <table id="tabelle" style="float:left" border="7" cellpadding="12" cellspacing="0">
      <tr>
        <td id="eins">
          <input type="text" name="Display2" class="display" readonly>
          <input type="text" name="Display" class="display" readonly></td>
      </tr>

      <tr>
        <td id="zwei">

          <table border="1" cellpadding="0" cellspacing="0">
            <tr>
              <td><input type="button" class="zahlen" value="  7   " onmouseleave="end()">
              </td>
              <td><input type="button" class="zahlen" value="  8   " onmouseleave="end()">
              </td>
              <td><input type="button" class="zahlen" value="  9   " onmouseleave="end()">
              </td>
              <td><input type="button" class="sonst" value="  &#171  " onClick="backspace()">
              </td>
            </tr>

            <tr>
              <td><input type="button" class="zahlen" value="  4   " onmouseleave="end()">
              </td>
              <td><input type="button" class="zahlen" value="  5   " onmouseleave="end()">
              </td>
              <td><input type="button" class="zahlen" value="  6   " onmouseleave="end()">
              </td>
              <td><input type="button" class="ops" value="  +   " onClick="add(this.className,'+')">
              </td>
            </tr>

            <tr>
              <td><input type="button" class="zahlen" value="  1   " onmouseleave="end()">
              </td>
              <td><input type="button" class="zahlen" value="  2   " onmouseleave="end()">
              </td>
              <td><input type="button" class="zahlen" value="  3   " onmouseleave="end()">
              </td>
              <td><input type="button" class="ops" value="  -   " onClick="add(this.className,'-')">
              </td>
            </tr>

            <tr>
              <td><input type="button" class="zahlen" value="  .   ">
              </td>
              <td><input type="button" class="zahlen" value="  0   " onmouseleave="end()">
              </td>
              <td><input type="button" class="istgleich" value="  =   " onClick="Ergebnis();ausgabe();gleichPressed()">
              </td>
              <td><input type="button" class="ops" value="  *   " onClick="add(this.className,'*')">
              </td>
            </tr>

            <tr>
              <td><input type="button" class="zahlen" value=" ( ">
              </td>
              <td><input type="button" class="zahlen" value=" ) ">
              </td>
              <td><input type="reset" class="button" value="  C  ">
              </td>
              <td><input type="button" class="ops" value="  /   " onClick="add(this.className,'/')">
              </td>
            </tr>

          </table>
        </td>
      </tr>
    </table>
  </form>

  <div class="Historie" id="Historie" hidden="true">
  </div>
</body>

</html>

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

111 views

1 Answer

深蓝 · Answer 1 · 2022-01-31T07:13:44+0000

Just like Bergi said, your debounce function is broken. You need to initialize the timer variable outside the returned function.

This is your implementation:

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

And this is how you fix your bug:

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

var counter;
var count = 0;

var equalsPressed = false;
var dritter = false;
var array = new Array();

window.onload = function() {
  let x = document.getElementsByClassName('zahlen')
  let i;
  for (i = 0; i < x.length; i++) {
    let y = x[i];
    x[i].addEventListener('mousedown', function() {
      add(this.className, this.value.replace(/s/g, ''));
    }, true);
    //x[i].addEventListener(mousedown,function('Hi')
    x[i].onmousedown = debounce(function() {
      start(y.className, y.value.replace(/s/g, ''));
    }, 200);
  }
}

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


function start(clicked_className, Zeichen) {
  counter = setInterval(function() {
    add(clicked_className, Zeichen);
    count++;
  }, 370);
}

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


function Check(Eingabe) {
  // indexof=suche in "0123456789[]()-+*%/" nach den chars der eingabe(0 bis 1 kleiner als l?nge (also alle)) und schaue an welcher position im string diese sind.wenn position kleiner0(also nicht vorhanden)
  // dann return false, ansonsten alles gut
  var inhalt = "0123456789[]().-+*%/=e";
  for (var i = 0; i < Eingabe.length; i++)
    if (inhalt.indexOf(Eingabe.charAt(i)) < 0) return false;
  return true;
}


function Ergebnis() {
  var z = document.getElementById("Historie");
  z.style.display = "block";
  var ausg = 0;

  if (equalsPressed && Check(window.document.Rechner.Display.value)) {
    var o = window.document.Rechner.Display2.value;
    var p = window.document.Rechner.Display.value;
    p = p.replace("=", '');

    const chars = ["+", "-", "*", "/"];
    var last;

    for (const rechenarten of o) {
      if (chars.includes(rechenarten)) {
        last = rechenarten;
      }

    }
    //lastIndexOf z?hlt von hinten und f?ngt bei o.length - 1 also der letzten Position an
    //und sucht last, also die am weitesten hinten vorkommende der Rechenarten
    o = o.slice(o.lastIndexOf(last, o.length - 1), o.lenght);

    ausg = eval(p + o);

    ausg = ausg.toFixed(getDecimalPlaces(p));
    window.document.Rechner.Display.value = ausg;
    window.document.Rechner.Display2.value = window.document.Rechner.Display2.value + o;
    dritter = true;
  } else {
    var y = 0;
    var x = 0;

    if (Check(window.document.Rechner.Display.value))
      y = window.document.Rechner.Display.value;
    window.document.Rechner.Display2.value = y;
    ausg = eval(window.document.Rechner.Display.value);
    ausg = ausg.toFixed(getDecimalPlaces(y)); //
    window.document.Rechner.Display.value = "=" + ausg;
  }
}

function getDecimalPlaces(numb) {
  var highest = 0;
  var counter = 0;
  for (a = 0; a < numb.length; a++) {
    if (numb.charAt(a - 1) == ".") {
      do {
        counter++;
        a++;
      }
      while (!isNaN(numb.charAt(a)) && a < numb.length);
    }
    if (counter > highest) {
      highest = counter;
    }
    counter = 0;
  }
  return highest;
}


function add(clicked_className, Zeichen) {
  if (equalsPressed == false && clicked_className == 'zahlen') {
    window.document.Rechner.Display.value =
      window.document.Rechner.Display.value + Zeichen;
  } else if (dritter && equalsPressed && clicked_className == 'zahlen') {
    var array = new Array();
    array.push(window.document.Rechner.Display2.value + "=" +
      window.document.Rechner.Display.value);

    var myTableDiv = document.getElementById("Historie")
    var table = document.createElement('TABLE')
    var tableBody = document.createElement('TBODY')
    table.border = '0';
    table.appendChild(tableBody);
    var tr = document.createElement('TR');
    tableBody.appendChild(tr);

    var td = document.createElement('TD')
    td.width = '275';
    td.style.textAlign = "right";
    td.appendChild(document.createTextNode(array[0]));

    tr.appendChild(td);
    myTableDiv.appendChild(table)


    window.document.Rechner.Display2.value = "";
    window.document.Rechner.Display.value = "";
    window.document.Rechner.Display.value =
      window.document.Rechner.Display.value + Zeichen;
    equalsPressed = false;

  } else if (equalsPressed && clicked_className == 'zahlen') {
    window.document.Rechner.Display2.value = "";
    window.document.Rechner.Display.value = "";
    window.document.Rechner.Display.value =
      window.document.Rechner.Display.value + Zeichen;
    equalsPressed = false;

  } else if (clicked_className == 'ops') {
    var x;
    window.document.Rechner.Display.value = window.document.Rechner.Display.value.replace("=", '');
    window.document.Rechner.Display.value =
      window.document.Rechner.Display.value + Zeichen;
    equalsPressed = false;
  }
}



function gleichPressed() {
  equalsPressed = true;
}


function backspace() {
  var abschneiden = window.document.Rechner.Display.value;
  for (var i = 0; i < abschneiden.length; i++) {
    var output = abschneiden.slice(0, -1);
    window.document.Rechner.Display.value = output;
  }
}

function ausgabe() {

  if (equalsPressed) {

  } else {

    array.push(window.document.Rechner.Display2.value +
      window.document.Rechner.Display.value);
    console.log(array);

    var myTableDiv = document.getElementById("Historie")
    var table = document.createElement('TABLE')
    var tableBody = document.createElement('TBODY')
    table.border = '0';
    table.appendChild(tableBody);
    var tr = document.createElement('TR');
    tableBody.appendChild(tr);

    var td = document.createElement('TD')
    td.width = '275';
    td.style.textAlign = "right";
    td.appendChild(document.createTextNode(array[0]));

    tr.appendChild(td);
    myTableDiv.appendChild(table)
  }
}

body {
  font-family: "Century Gothic", CenturyGothic, Geneva, AppleGothic, sans-serif;
}

.button,
.ops,
.zahlen,
.sonst,
.istgleich {
  background-color: #A4A4A4;
  background: linear-gradient(240deg, grey, white);
  color: black;
  width: 60px;
  text-align: center;
  font-family: System, sans-serif;
  font-size: 100%;
}

.button:hover,
.zahlen:hover,
.sonst:hover,
.ops:hover,
.istgleich:hover {
  color: #2E2E2E;
  background-color: #FAFAFA;
  background: linear-gradient(30deg, darkgrey, lightgrey, grey);
  ;
}

.display {
  width: 100%;
  text-align: right;
  font-family: System, sans-serif;
  font-size: 100%;
}

#Historie {
  background: linear-gradient(30deg, silver, white, grey);
  ;
  border: 5px outset;
  float: left;
  text-align: right;
}

#eins {
  background: linear-gradient(30deg, silver, grey, DimGray);
  ;
}

#zwei {
  background: linear-gradient(90deg, silver, grey);
  ;
}

#tabelle {
  width: 300px;
  height: 235px;
  float: left;
}

<html onmouseup="end()">

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

<body bgcolor="#FFFFE0" text="#000000">
  <form name="Rechner" action="" onSubmit="Ergebnis();return false;">
    <table id="tabelle" style="float:left" border="7" cellpadding="12" cellspacing="0">
      <tr>
        <td id="eins">
          <input type="text" name="Display2" class="display" readonly>
          <input type="text" name="Display" class="display" readonly></td>
      </tr>

      <tr>
        <td id="zwei">

          <table border="1" cellpadding="0" cellspacing="0">
            <tr>
              <td><input type="button" class="zahlen" value="  7   " onmouseleave="end()">
              </td>
              <td><input type="button" class="zahlen" value="  8   " onmouseleave="end()">
              </td>
              <td><input type="button" class="zahlen" value="  9   " onmouseleave="end()">
              </td>
              <td><input type="button" class="sonst" value="  &#171  " onClick="backspace()">
              </td>
            </tr>

            <tr>
              <td><input type="button" class="zahlen" value="  4   " onmouseleave="end()">
              </td>
              <td><input type="button" class="zahlen" value="  5   " onmouseleave="end()">
              </td>
              <td><input type="button" class="zahlen" value="  6   " onmouseleave="end()">
              </td>
              <td><input type="button" class="ops" value="  +   " onClick="add(this.className,'+')">
              </td>
            </tr>

            <tr>
              <td><input type="button" class="zahlen" value="  1   " onmouseleave="end()">
              </td>
              <td><input type="button" class="zahlen" value="  2   " onmouseleave="end()">
              </td>
              <td><input type="button" class="zahlen" value="  3   " onmouseleave="end()">
              </td>
              <td><input type="button" class="ops" value="  -   " onClick="add(this.className,'-')">
              </td>
            </tr>

            <tr>
              <td><input type="button" class="zahlen" value="  .   ">
              </td>
              <td><input type="button" class="zahlen" value="  0   " onmouseleave="end()">
              </td>
              <td><input type="button" class="istgleich" value="  =   " onClick="Ergebnis();ausgabe();gleichPressed()">
              </td>
              <td><input type="button" class="ops" value="  *   " onClick="add(this.className,'*')">
              </td>
            </tr>

            <tr>
              <td><input type="button" class="zahlen" value=" ( ">
              </td>
              <td><input type="button" class="zahlen" value=" ) ">
              </td>
              <td><input type="reset" class="button" value="  C  ">
              </td>
              <td><input type="button" class="ops" value="  /   " onClick="add(this.className,'/')">
              </td>
            </tr>

          </table>
        </td>
      </tr>
    </table>
  </form>

  <div class="Historie" id="Historie"

Categories

function - Javascript Interval continues endless without conditions met

Please log in or register to add a comment.

Please log in or register to answer this question.

1 Answer

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags