我如何在p5.js中使用JavaScript setTimeout来说明合并排序？

问题描述 投票：0回答：1

我为合并排序创建了一个JavaScript插图。它运行完美，我想要的只是使它在给定的时间间隔内排序。为了在500ms的间隔显示数字排序，我需要在哪里放置setTimeout或setInterval函数？

numbers = [15, 20, 4, 1, 25, 45, 32, 4];

function doMergeSort() {
    numbers = mergeSort(numbers);
}

function mergeSort(array) {
    if (array.length < 2) {
        return array;
    }
    let middle = parseInt(array.length/2);
    let left = array.slice(0, middle);
    let right = array.slice(middle, array.length);
    return merge(mergeSort(left), mergeSort(right))
}

function merge(left, right) {
    let result = [];
    while (left.length && right.length) {
        if (left[0] <= right[0]) {
            result.push(left.shift());
        } else {
            result.push(right.shift());            
        }
    }
    while (left.length) {
        result.push(left.shift());
    }
    while (right.length) {
        result.push(right.shift());
    }
    return result;
}
javascript algorithm settimeout setinterval mergesort
1个回答
0
投票

要完整回答，我将需要查看如何处理绘制方法。请记住，他的应用程序主循环正在绘制中。这意味着它不会随着在绘制循环中调用方法而改变，而只会在绘制结束时为您提供所有结果，并以此来更新屏幕。

如果在draw方法中调用doMergeSort（），则将始终在绘制已排序的数组。

您将必须找到某种方法来分解合并排序算法，以便通过绘制通过循环来增加每个步骤。为了演示它，通常需要以一种单独的方式“破坏”该算法。

这是我正在谈论的概念的非常简单的示例：

请注意，circleB不会针对循环的UpdateCircleB（）的每次迭代进行更新，仅在到达Draw（）的末尾时才进行更新。

let circleA = {
  y : 200,
  x : 30,
  r : 50

}

let circleB = {
  y : 300,
  x : 30,
  r : 50
}

function setup() {
  createCanvas(400, 800);
}

function draw() {
  //Increment Purple circle using draw loop
  //Every time we draw a frame, we move circle A 1 pixel to the right
  circleA.x++;
  
  //The green circle uses a for loop inside a method call to update
  //Every time we draw a frame, we move circle B 50 pixels to the right
  moveCircleB();
  
  //draw purple circle
  fill(152, 114, 132);
  ellipse(circleA.x,circleA.y,circleA.r);
  
  //draw green circle
  fill(157, 191, 158);
  ellipse(circleB.x,circleB.y,circleB.r);
}

function moveCircleB(){
  for(var i = 0; i < 50; i++){
    circleB.x++;
  }
}
html, body {
  margin: 0;
  padding: 0;
}
canvas {
  display: block;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/addons/p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

  </head>
  <body>
    <script src="sketch.js"></script>
  </body>
</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.