Анимированное заполнение таблицы

Question

Всем привет! Есть функция, которая заполняет ячейки элементами массива:

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];

(function addInCell() {
    var cell = document.getElementsByTagName('input');

    for (var i = 0; i <= cell.length; i++) {
       cell[i].value = arr[i];
    }
})();

Подскажите, пожалуйста, как осуществить заполнение ячеек не сразу, а пошагово - 1, задержка, 2, задержка и т.д.? Т.е., как бы анимированное заполнение.

Answer 1

window.onload = function() {
  var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
(function addInCell() {
    var cell = document.getElementsByTagName('input');
for (var i = 0; i < cell.length; i++) {
  var s = function(i) {
    setTimeout(function() {
      cell[i].value = arr[i];
    }, 1000 * i)
  }
  s(i);
}

})();
}

<input type="text" name="" id="">
<input type="text" name="" id="">
<input type="text" name="" id="">
<input type="text" name="" id="">
<input type="text" name="" id="">
<input type="text" name="" id="">