2017-07-11 2 views
-3

Ich bin ein Binary Tree Search-Visualisierungsprogramm mit JSAV-Bibliothek zu entwickeln. Das Problem ist, dass alle Knoten sofort hervorgehoben werden und ich es Schritt für Schritt ohne wiederholtes Drücken der Taste zeigen möchte.SetTimeout ausgeführt, aber keine Verzögerung

Ich habe versucht, einen Knoten zu markieren und Timeout-Funktion zu verwenden, um die Ausführung für einige Sekunden zu beenden und dann den Knoten aufzuheben und dann mit dem nächsten ausgewählten Knoten fortzufahren, jedoch gibt es überhaupt keinen Effekt. Kann mir jemand vorschlagen, was ich tun kann, um mein Programm zu modifizieren, um diese Art von Funktion zu integrieren?

Code: (Verwendet JSAV Bibliothek)

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
     <link rel="stylesheet" href="css/JSAV.css" type="text/css" media="screen" title="no title" charset="utf-8" /> 
    <title>Test Binary Tree Page</title> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
    <script src="lib/jquery.transit.js"></script> 
    <script src="lib/raphael.js"></script> 
    <script src="lib/JSAV.js"></script> 
    <Script src="lib/includeall.js"></Script> 


<style> 
    .highlight 
    { 

     background-color: blue; 
    } 
    .unhighlight 
    { 

     background-color: white; 

    } 
    #av { 
     width: 98%; 
     position: relative; 
    } 
    .jsavcounter { 
     position: absolute; 
     top: 15px; 
    } 
    .jsavtree { 
     position: relative; 
     width: 500px; 
     height: 300px; 
    } 
    svg { 
     height: 600px; 
    } 
    path { 
     pointer-events: visible; 
    } 


    </style> 

</head> 
<body> 
<div id="av"> 

    </div> 
<script> 

    var jsav=new JSAV("av"); 
    var bt=jsav.ds.binarytree(); 

addNode(bt,20); 
addNode(bt,5); 
addNode(bt,40); 
addNode(bt,50); 
addNode(bt,60); 
addNode(bt,70); 
addNode(bt,4); 

function donothing() 
{ 

} 
    function searchBinarytree() 
    { 
     var value=parseInt(document.getElementById("value").value); 

     var test=bt.root(); 

     while(test!=null) 
     { 
      test.addClass("highlight"); 
      setTimeout(donothing,20000); 




      if(test.value()==value) 

      { 
       break ; 

      } 

      if(test.value()<=value) 
      { 
      test.toggleClass("unhighlight"); 
      test=test.right(); 
      } 
      else 

      {test.toggleClass("unhighlight"); 
      test=test.left(); 
      } 


      bt.layout(); 
     } 
    } 
</script> 

<div id="valuebox"> 
    Value to search:<input id="value" type="text"> <button type="button" onclick="searchBinarytree()"> Search</button> 

</div> 

</body> 
</html> 
+7

Es gibt keine 'setTimeout' überall auf https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout

Etwas gefunden werden (mit Ausnahme der Frage). –

+0

Bitte zeigen Sie Ihr Beispiel mit dem 'setTimeout', sonst können wir Ihnen nicht helfen, herauszufinden, was das Problem ist – Cirou

+0

Nein' setTimeout' und sehr schlecht eingerückt – azro

Antwort

0

Nicht wirklich sicher, dass es das Problem aber:

Wenn Sie setTimeout verwenden verwenden Sie es wie die

setTimeout(yourFunction, timeout); 

nicht

setTimeout(yourFunction(), timeout); 

Sie haben Um die aufzurufende Funktion zu übergeben, rufen Sie die Funktion

+1

Ja, obwohl Sie nicht das Schlüsselwort 'Funktion verwenden können 'Hier, da die JS-Engine denken wird, dass das ein Syntaxfehler ist. – halfer

1

nicht auf. setTimeout ruft donothing auf, was "nichts tut". Sie sollten stattdessen die Funktion, die wiederholt werden soll, innerhalb von setTimeout aufrufen. Ich nehme an, Sie erwarten, dass es bei diesem Aufruf pausiert, aber so funktioniert setTimeout nicht. Weitere Daten können wie folgt (nicht getestet) funktionieren sollte

var test; 

function searchBinarytree() {  
    test = bt.root();  
    test.addClass("highlight"); 
    setTimeout(updateNode, 20000); 
} 

function updateNode() { 
    var value = parseInt(document.getElementById("value").value); 

    if (test != null) { 

    if (test.value() != value) {  
     test.removeClass("highlight"); 

     if (test.value() <= value) { 
     test = test.right(); 
     } else { 
     test = test.left(); 
     } 

     if (test != null) { 
     test.addClass("highlight"); 
     } 

     setTimeout(updateNode, 20000); 
    } 

    bt.layout(); 
    } 
} 
+0

Danke H77 für den Vorschlag, aber der Code hebt auch den Knoten hervor, dessen Wert sofort übereinstimmt. Was ich benötige, ist root markieren, den nächsten Knoten berechnen, root markieren und dann den ausgewählten Knoten markieren, damit man das Gefühl bekommt, wie sich der Algorithmus bewegt. – user3930213

+0

Ich habe den Code aktualisiert. Funktioniert das wie erwartet? – H77

+0

Vielen Dank für Hilfe, aber es hebt immer noch den Knoten hervor, dessen Wert übereinstimmt. Gibt es eine Lösung? – user3930213

Verwandte Themen