печать звездной пирамиды каждую секунду - PullRequest
Новая
       7

печать звездной пирамиды каждую секунду

1 голос
/ 04 февраля 2020

У меня есть простая печать пирамиды для l oop. Я отлично работаю, но я хотел добавить небольшой поворот в l oop. Я хочу печатать каждую звезду в секунду. Поэтому я добавил setinterval. Когда я добавил интервал, он разрушает пирамиду и не показывает в секунду. 

$( ".target" ).change(function() {
  var totalNumberofRows = this.value;
    for (var i = 1; i <= totalNumberofRows; i++) {
        for (var j = 1; j <= i; j++) {
            setInterval(function(){ 
            
            document.write("*");
            
            }, i * 1000);
            
        }
        document.write("<br>");
        
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class='target'>

Ответы [ 2 ]

3 голосов
/ 04 февраля 2020

document.write очистит существующий документ, если он загружен - и если сценарий выполняется асинхронно, сценарий будет загружен к тому времени. Ваш интервал также никогда не заканчивается в данный момент.

Я бы await задержка прямо перед добавлением * вместо: 

const delay = () => new Promise(resolve => setTimeout(resolve, 1000));
// Add a change listener to the .target element
$(".target").change(async function() {
  // Figure out the total number of rows by taking the value from the input field
  var totalNumberofRows = this.value;
  // Iterate from 1 to the totalNumberofRows
  for (let i = 1; i <= totalNumberofRows; i++) {
    // Create a row, append it to the body
    const row = document.body.appendChild(document.createElement('div'));
    for (var j = 1; j <= i; j++) {
      // Add a character to the row
      row.textContent += '*';
      // Wait until 1000ms has passed before continuing
      await delay();
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class='target'>
0 голосов
/ 04 февраля 2020

Это сложный вопрос. 

for (var i = 1; i <= totalNumberofRows; i++) {
        for (var j = 1; j <= i;) {
            printSlow(j, function(){
              j++
            })

    }

function printSlow(qty) {
  let counter = qty
  let printer = setInterval(function() {
    if (counter > 0) {
      document.print('*')
      counter --
    }
    else {
      clearInterval(printer)
      document.print('<br />')
      callback()
    }
  }, 1000)
}

setInterval isyn c, поэтому вы должны это учитывать. Вам также нужно очистить интервал, как только вы получите то, что вам нужно от него. Исходному l oop, вероятно, понадобятся некоторые настройки.

...