clearInterval nicht in Schalter arbeiten()

Also das ist mein Code:clearInterval nicht in Schalter arbeiten()

<!DOCTYPE html> 

<html lang="en"> 
    <head> 
     <meta charset="utf-8" /> 
     <title></title> 
     <style> 
      html { 
       overflow: hidden; 
      } 
      #demo{ 
       position: relative; 
      } 
     </style> 
    </head> 
    <body> 
     <input type="text" onkeypress="Snake(event)"> 
     <p id="demo" style="left: 10px;">--></p> 
     <script> 
      function Snake(event) { 
       var x = event.which; 

       switch (x) { 
        case 119: /*forward(w)*/ 
         break; 
        case 115: /*back(s)*/ 
         break; 
        case 97: document.getElementById("demo").style.left = "10px"; 
         clearInterval(int); 
         break; 
        case 100: var y = document.getElementById("demo").style.left; y = y.replace("px", ""); y = parseInt(y); 
         var int = setInterval(function() { 
          y += 10; 
          var z = y.toString(); 
          document.getElementById("demo").style.left = z + "px"; 
         }, 1000); 
         break; 
       } 
      } 
     </script> 
    </body> 
</html>

Es funktioniert ziemlich gut, wenn i d (Unicode = 100) tippen, aber wenn ich eine (Unicode = 97) drücken es geht zurück zu 10px, dann geht es weiter von wo es ging. (mit dem d). Wahrscheinlich gibt es ein Problem mit clearInterval().

Quelle

2016-11-30 blackbear2014

Zuerst tippen Sie Unicode = 100 und dann 97 richtig? – maheshiv

@maheshiv ja, zuerst 100 und dann 97 – blackbear2014

Ihre int Variable ist auf die Funktion beschränkt. Das bedeutet, dass Sie nicht dieselbe int Variable haben, wenn die Funktion das nächste Mal aufgerufen wird; Du hast es mit einem neuen zu tun.

Um eine einzelne int Variable zu verwenden, deklarieren Sie sie in dem Bereich, in dem Snake deklariert ist. Allerdings, das bedeutet, statt einer globalen (Snake), haben Sie jetzt zwei (Snake und int). Globals sind ein Bad Thing ™. Statt

, lassen Sie uns keine Globals haben und Haken Handler mit modernen Event-Handling:

<input id="the-inpue" type="text""> 
<p id="demo" style="left: 10px;">--></p> 
<script> 
(function() { // A scoping function so we don't create globals 
    var int = 0; // The variable 
    function Snake(event) { 
     var x = event.which; 

     switch (x) { 
      case 119: /*forward(w)*/ 
       break; 
      case 115: /*back(s)*/ 
       break; 
      case 97: document.getElementById("demo").style.left = "10px"; 
       clearInterval(int); 
       break; 
      case 100: var y = document.getElementById("demo").style.left; y = y.replace("px", ""); y = parseInt(y); 
       var int = setInterval(function() { 
        y += 10; 
        var z = y.toString(); 
        document.getElementById("demo").style.left = z + "px"; 
       }, 1000); 
       break; 
     } 
    } 

    // Hook up the handler 
    document.getElementById("the-input").addEventListener("keypress", Snake, false); 
</script>

Hinweis: Es gut andere Dinge falsch mit dem Code sein kann. Aber das ist falsch mit int und nicht den Timer zu löschen.

Quelle

2016-11-30 18:28:02

Ihre int Variable außerhalb Snake Funktion deklariert werden, um für setInterval() und clearInterval() Zugang zu ihm mit jedem keypress Ereignisse zu haben.

<html lang="en"> 
    <head> 
     <meta charset="utf-8" /> 
     <title></title> 
     <style> 
      html { 
       overflow: hidden; 
      } 
      #demo{ 
       position: relative; 
      } 
     </style> 
    </head> 
    <body> 
     <input type="text" onkeypress="Snake(event)"> 
     <p id="demo" style="left: 10px;">--></p> 
     <script> 
      var int; // 1st change 
      function Snake(event) { 
       var x = event.which; 

       switch (x) { 
        case 119: /*forward(w)*/ 
         break; 
        case 115: /*back(s)*/ 
         break; 
        case 97: document.getElementById("demo").style.left = "10px"; 
         clearInterval(int); // 2nd change 
         break; 
        case 100: var y = document.getElementById("demo").style.left; y = y.replace("px", ""); y = parseInt(y); 
         int = setInterval(function() { // 3rd change 
          y += 10; 
          var z = y.toString(); 
          document.getElementById("demo").style.left = z + "px"; 
         }, 1000); 
         break; 
       } 
      } 
     </script> 
    </body> 
</html>

Quelle

2016-11-30 18:31:21 Wizard

Sie können ein Objekt erstellen und zuweisen Funktion und Intervallvariable als Eigenschaften

var sampleTimer = { 
    int: null, 
    Snake: function(event) { 
      var x = event.which; 

      switch (x) { 
       case 119: /*forward(w)*/ 
        break; 
       case 115: /*back(s)*/ 
        break; 
       case 97: document.getElementById("demo").style.left = "10px"; 
        clearInterval(this.int); 
        break; 
       case 100: var y = document.getElementById("demo").style.left; y = y.replace("px", ""); y = parseInt(y); 
        this.int = setInterval(function() { 
         y += 10; 
         var z = y.toString(); 
         document.getElementById("demo").style.left = z + "px"; 
        }, 1000); 
        break; 
      } 
     } 
}

Sie können sampleTimer.Snake nennen (Schlüssel, die zu 100 Unicode hat); sampleTimer.Snake (Schlüssel mit 97 Unicode);

Variablen sind Funktionsbereiche (dh Variablen sind innerhalb der Funktion zugänglich). Sobald Sie die Funktion aufrufen, endet die Lebensdauer der Variablen.

Oder Sie können tun, wie von @ T.J vorgeschlagen. Crowder

Quelle

2016-11-30 18:46:28 maheshiv

clearInterval nicht in Schalter arbeiten()

Antwort

Verwandte Themen