время для цикла в JS - PullRequest
Новая
       14

время для цикла в JS

0 голосов
/ 13 ноября 2018

Я написал этот код в JS: 

function startFunction() {
p1 = document.getElementById('p1').innerHTML;
for (var i=1; i<=p1.length; i++) {
        alert(p1.slice(0, i));
    }
}

Я вызываю функцию с событием onload в html: 

    <body onload="startFunction()">

И это абзац с p1 id: 

    <p id="p1">Hi, I'm</p>

Как сделать задержку для цикла for.Я хочу, чтобы моя программа писала текстовые буквы p1 .

Ответы [ 5 ]

0 голосов
/ 14 ноября 2018

Вот краткий пример использования setTimeout вместо setInterval.Нет большой разницы, за исключением того, что вам не нужно очищать тайм-аут - вы просто не запускаете его, если он не соответствует условию. 

// cache the elements
const p1 = document.getElementById('p1');
const out = document.getElementById('out');

// make the text content from p1 iterable and split it into
// the head (first element), and tail (everything else)
const [head, ...tail] = [...p1.textContent];

const loop = function loop(head, tail) {

  // update the output text content with the result of head
  out.textContent = head;

  // if there's anything left of the tail array
  if (tail.length) {

    // remove the first element of tail and
    // add it to head
    head += tail.shift();

    // call the function again with the new head and tail
    setTimeout(loop, 200, head, tail);
  }

// pass in the head and tail to the function
}(head, tail);
#p1 { display: none; }
<p id="p1">Content written letter by letter</p>
<p id="out"></p>
0 голосов
/ 13 ноября 2018

Ниже приведен подход, который, я думаю, может помочь вам достичь того, что вы пытаетесь сделать. Этот подход использует setInterval (вместо цикла) для многократного выполнения функции. Смотрите комментарии, чтобы понять логику кода: 

//Grab our DOM elements
var p1 = document.getElementById('p1').innerHTML;
var copy = document.getElementById('copy');

//Execute a function every 250 milliseconds
var intervalId = setInterval(onInterval, 250);

//nextLetter is a function that will return the character at a particular index in the string. The function will increase the index each time it is called. The function will return null once it exceeds the innerHTML length. c is a "private" variable that can't be modified elsewhere in the program.
var nextLetter = (function(i, limit) {
  var c = i;
  return function() {
    var idx = c++;
    if (idx > limit) {
      return null;
    }
    return p1.charAt(idx);
  };
})(0, p1.length);

//The function we will execute at each interval
function onInterval() {
  var letter = nextLetter();
  if (letter) {
    copy.innerHTML += letter;
  } else {
    console.log('End of content reached - removing interval');
    clearTimeout(intervalId);
  }
}
<p id="p1">Make sure to read the in-code comments</p>
<p id="copy"></p>
0 голосов
/ 13 ноября 2018

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

Вместо этого вы можете использовать некоторый таймер, например setInterval(): 

function startFunction() {
    var p1 = document.getElementById('p1');
    var txt = p1.innerHTML;
    var i=0;
    var timer = setInterval(function() {
        p1.innerHTML = txt.slice(0,i++);
        if(i>txt.length) {
            clearInterval(timer);
        }
    },500);
}

startFunction();
<p id="p1">Hi, I'm</p>
0 голосов
/ 13 ноября 2018

Вам не нужен цикл, вам нужен interval. Функция interval Javascript будет вызывать вашу функцию с (приблизительно) запрошенным интервалом. Так, например: 

function startFunction() {
  var p1 = document.getElementById('p1').innerHTML
  var count = 1
  var finished = p1.length
  var iv = setInterval(function() {
    alert(p1.slice(0,count++))
    if (count > finished) {
      clearInterval(iv) // stops the interval from firing once we finish our task
    }
  }, 1000) // 1000 ms, or every second.
}
0 голосов
/ 13 ноября 2018 
var alertEachLetter =function(p1, i){
    setTimeout(function(){
        alert(p1.slice(0, i));
    },1000);
};

 function startFunction() {
 p1 = document.getElementById('p1').innerHTML;
 for (var i=1; i<=p1.length; i++) {
        alertEachLetter(p1, i);
    }
}

зачем создавать эту функцию alertEachLetter. для этого нужно проверить эту ссылку

setTimeout в цикле for не печатает последовательные значения

...