SetTimeout执行但没有延迟

-3

我正在开发一个使用JSAV库的二叉树搜索可视化程序。问题是所有的节点都会立即被突出显示，我想一步一步地显示它，而不需要再次按下任何按钮。SetTimeout执行但没有延迟

我试着突出显示一个节点，并使用超时功能停止执行几秒钟，然后取消突出显示该节点，然后继续执行下一个选定节点，但根本没有任何效果。任何人都可以建议我如何修改我的程序以合并此类功能？

代码：（使用JSAV库）

<!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>

来源

2017-07-11 user3930213

有没有找到任何地方'setTimeout'（除问题）。 –

请用'setTimeout'显示你的例子，否则我们不能帮你弄清楚有什么问题 – Cirou

没有'setTimeout'和非常不好的缩进 – azro

不能确定，这是你的问题，而是：

当您使用的setTimeout使用它像

setTimeout(yourFunction, timeout);

不

setTimeout(yourFunction(), timeout);

你有要传递要调用的函数，您不要调用函数

来源

2017-07-11 08:10:56

是的，尽管你不能使用关键字'function '在这里，因为JS引擎会认为这是一个语法错误。 – halfer

setTimeout正在调用donothing，这是“无所事事”。你应该调用你想要在setTimeout中重复的函数。我假设你期望它在这个调用中暂停，但那不是setTimeout的工作原理。更多信息可在https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout

像这样的东西应该工作（未测试）

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(); 
    } 
}

来源

2017-07-11 08:45:32 H77

感谢H77的建议，但代码还突出显示其值立即匹配的节点。我需要的是突出显示根，计算下一个节点，取消高亮根，然后突出显示所选节点，以便了解算法如何移动。 – user3930213

我更新了代码。这是否按预期工作？ – H77

非常感谢您的帮助，但它仍然直接突出显示了其值相匹配的节点。是否有解决方案？ – user3930213

SetTimeout执行但没有延迟

回答

相关问题