Печать на массиве элементов экрана с задержкой / повторением их с помощью функции обратного вызова Javascript

Я пытаюсь напечатать заданные ячейки массива с задержкой 2 секунды для каждого элемента между каждой печатью, используя функцию обратного вызова, но я не могу заставить ее работать. Вместо этого он печатает их все вместе через 2 секунды

вот код:

var words = ["horse","pig","fish","lion"]
var time

function display(callback){
    time = setTimeout(typing, 2000);
}

function typing(){
    for (var i=0; i<words.length; i++)
        document.write(words[i])
}
display(typing);

Я мог бы также использовать некоторую помощь с этим кодом, если это возможно. Если первая переменная (в данном случае a) - это число, а вторая переменная (в данном случае b) - это строка, она должна вывести строку столько раз, сколько и номер переменной a. Этот не работает вообще:/

вот код:

function display(callback) {
   time = setTimeout(typing, 1000)
}
function typing(a,b) {
   var aInput = prompt("Please enter a input");
   aInput = a
   var bInput = prompt("Please enter b input");
   bInput = b
     if (a === int)
       for (i=0; i<a.length; i++)
          alert(b)
   else 
      alert("Not valid Input")
    }

display(typing);

заранее большое спасибо за огромную помощь, которую это сообщество оказывает начинающим:)

Источник

3 ответа

Решение

Чтобы ответить на ваш первый вопрос. Все слова печатаются через 2 секунды, потому что цикл for не ждет с каждым циклом до выполнения setTimeout закончен, поэтому он запускает все setTimeout s почти мгновенно, и каждый из них ждет 2 секунды, по-видимому, заканчивая в то же время. Вы можете изменить это так.

var words = ["horse","pig","fish","lion"]

function display() {
  let counter = 0;
  const interval = setInterval(() => {
    document.write(words[counter++]);
    if (counter === words.length) {
      clearInterval(interval);
    }
  }, 2000);
}

display();

Что касается второй проблемы. Это можно решить аналогичным образом.

function display(a, b) {

  // if a and b were passed to the function use those
  // otherwise ask for them by prompting the user
  let aInput = a || prompt('Please enter a input');
  let bInput = b || prompt('Please enter b input');

  // check if a is valid integer (could also use Math.floor if floats are valid in your case as well)
  if (!isNaN(parseInt(a))) {
    let counter = 0;
    const interval = setInterval(() => {
      alert(b);
      counter++;
      if (counter >= parseInt(a)) {
        clearInterval(interval);
      }
    }, 2000);
  } else {
    alert('Not a valid input');
  }
}

display(4, 'a');

Источник

Есть несколько вещей не так со вторым кодом:

  1. Вы принимаете участие через prompt так что вам не нужно передавать аргументы typing,
  2. По вышеуказанной причине a и b не определены. Так, aInput = a а также bInput = b не имеет смысла. Вместо этого сохраните значения aInput и bInput в a и b соответственно.
  3. if (a === int) неправильный синтаксис. В JavaScript нет такой вещи как int. Если вы хотите проверить, является ли номер, используйте isNaN(a),
  4. for loop в пределах if-statement должен быть заключен в {}, поскольку он содержит более одной строки.

Это должно работать нормально:

function display(callback) {
   time = setTimeout(typing, 1000)
}

function typing() {
   var aInput = prompt("Please enter a input");
   var a = Number(aInput); 
   var bInput = prompt("Please enter b input");
   var b = bInput;
     if (!isNaN(a)){
       for (var i=0; i<a; i++){
          alert(b);
        }
    }
   else {
      alert("Not valid Input")
    }
}

display(typing);
Источник

Судя по всему, вы должны делать эту часть:

var aInput = prompt("Please enter a input");
aInput = a
var bInput = prompt("Please enter b input");
bInput = b

до:

time = setTimeout(typing, 1000)

а затем отправив ваши параметры a и b по адресу:

typing(a,b)

Если вы делаете это таким образом, это должно работать.

Источник
Другие вопросы по тегам