Question

我正在使用JSAV库开发二叉树搜索可视化程序。问题是所有节点都会立即突出显示，我想一步一步地显示它，而不是一次又一次地按下按钮。

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

代码:(使用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>

Answer 1

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

Answer 2

不确定这是你的问题但是：

使用setTimeout时，请使用它

不

setTimeout(yourFunction, timeout);

你必须传递要调用的函数，不要调用函数

SetTimeout正在执行但没有延迟

2 个答案: