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執行但沒有延遲

回答

相關問題