Javascript: Задержка рисования на холсте html5 в цикле

Используемый мной код генерирует изображение структуры данных дерева. Если вызывается функция, которая добавляет значение к дереву, она ищет узел, в который должно быть добавлено новое значение. Это делается в цикле. Если правильный узел найден, он добавляет значение. После каждого шага функция должна рисовать дерево на холсте html5, с узлом, который в настоящий момент проверен (если он является узлом для присоединения значения) в другом цвете, чем остальная часть дерева. Чтобы увидеть результат, должна быть задержка между прорисованием одного шага и следующего. Если я просто выполняю такой код, единственное, что вы видите, это последний шаг, потому что все происходит слишком быстро.Javascript: Задержка рисования на холсте html5 в цикле

(Более конкретно, структура данных представляет собой дерево trie, а добавленное значение - это слово. Каждый узел является буквой. Если слово «cat» существует, и я добавляю слово «care», поиск дерева корень, чтобы найти c, ищет его, чтобы найти a, ищет ничего не находит и добавляет r после a, добавляет e в r и добавляет узел «конец слова» в e. Я не думаю, что я может сделать это без петлирования для каждого возможного дерева.)

Я понятия не имею, как поставить setTimeout() там. Я мог бы написать функцию задержки самостоятельно, но тогда это остановило бы браузер от работы до тех пор, пока не будет выполнена задержка?

Есть ли у кого-нибудь идеи, что я могу сделать? Заранее спасибо.

EDIT: Это псевдо-вещь, что делает функция добавления прямо сейчас. Это не фактический код, но как и то, что он делает. Извините, это немного ...

Trie add function { 

    get a word via prompt 

    stop if word doesnt consist of only letters /* at least one letter */ 

    working node = trie root /* the node that Im currently checking */ 
    node color = bright color 
    draw the tree 
    node color = normal color 

    for(every letter in word){ 

      if working node has no child nodes{ 
       make new node 
       new node value = current letter 
       new node parent = working node 
       working node children = array consisting of new node 
       working node = new node 
      } 
      else{ /* child nodes exist, search for current letter */ 
       found = false 
       for(every child node of working node){ 
        if(child node value === current letter){ 
         working node = current child node of working node 
         found = true 
         break 
        } 
       } 

       /* if current letter doesnt exist */ 
       if(!found){ 
        make new node 
        new node value = current letter 
        new node parent = working node 
        add new node to array of children of working node 
        working node = new node 
       } 
      } 

      // !!! there should be a delay before this happens !!! 

      working node color = bright color 
      draw the tree 
      working node color = normal color 
    } 

    make new end node 
    end node parent = working node 
    add end node to children of working node 
    working node = end node 

    // !!! there should be a delay before this happens !!! 

    node color = bright color 
    draw the tree 
    node color = normal color 
}

источник

2016-05-09 Yasmin

Добавьте код, который вы пробовали! – Anubhab

Я не знаю, разрешено ли мне, но я могу сделать некоторый псевдокод. – Yasmin

Можно ли просто задержать функцию рисования, остановить программу до тех пор, пока не произойдет функция рисования, а затем продолжите код после нее? – Yasmin

Вместо setTimeout вы можете использовать setInterval. Это похоже на цикл с задержкой между итерациями.

Например, с задержкой в 1 секунду:

var node_loop = setInterval(function(){ 
    // Draw a node 
}, 1000);

Чтобы остановить цикл:

clearInterval(node_loop);

Подробнее: https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval

источник

2016-05-09 11:05:34 JSierra

Javascript: Задержка рисования на холсте html5 в цикле

ответ

Смежные вопросы