星形金字塔打印每秒

Question

我有一个简单的循环金字塔打印。我工作正常，但我想给循环添加一点扭曲。我想每秒打印每颗星。所以我加了一个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'>

Answer 1

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'>

Answer 2

这很难。

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 是异步的，因此您必须考虑到这一点。一旦你从中得到你需要的东西，你还需要清除间隔。原始循环可能需要一些调整。

星形金字塔打印每秒

star pyramid print each second

javascript

setinterval