не могу понять, почему данный код не работает в цикле

Question

вместо того, чтобы при каждой итерации заменять значение строки, этот код меняет ее ОДИН РАЗ, в самом конце. и это не вопрос про асинхронную функцию, которая выполняет последнюю итерацию много раз, если что.

function changeVal(){
    setTimeout(function(){
        elem.innerHTML = myArr;
    }, 3000);
}
changeVal();

полностью код выглядит вот так:

var myArr = [9, 9, 8, 4];
var newArr = [];
var elem = document.getElementById("myArray");
elem.innerHTML = myArr;
function counter() {
  var max = 10;
  var min = 1;
  var end = 10;
  for (var i = myArr[3]; i <= max; i++) {
    /приравниваем временную переменную к "i", чтобы работать 
    со значением "i" не влияя на цикл/
    var temp = i;
    /полученное значение вставляем в новый массив/
    function pusher(val) {
      newArr.push(val);
    }
    pusher(temp);
    /получаем строку из цифры в массиве, чтобы в последствии применить метод split для 
    двузначных чисел и десятки отправить в следующий разряд данного нам массива, а единицы
    оставить/
    var string1 = newArr.join('');
    /разделяем, если есть что разделять/
    newArr = string1.split('');
    /если длина newArr больше 1, то есть полученное число двузначное/
    if (newArr.length > 1) {
      /то берем второй элемент массива (еденицы, который будет равен нолю) и превращаем его из строки в цифру/
      temp = parseInt(newArr[1]);
      /вырезаем четвертый (последний) элемент данного массива и заменяем его значением temp, добиваясь таким образом обнуления разряда единиц после 9/
      myArr.splice(3, 1, temp);
      /если длина массива равна единице,/
    } else {
      /* то, обнуляем значение newArr и /
      newArr = [];
      myArr.splice(3, 1, i);
    }
    /заменяем данный массив на странице новым массивом с новыми данными/
    function changeVal() {
      setTimeout(function() {
        elem.innerHTML = myArr;
      }, 3000);
    }
    changeVal();
    if (i == max && myArr[0] !== max) {
      newArr = [];
      myArr[2]++;
      var tempi = myArr[2];
      pusher(tempi);
      var string2 = newArr.join('');
      newArr = string2.split('');
      if (newArr.length > 1) {
        tempi = parseInt(newArr[1]);
        myArr.splice(2, 1, tempi);
      } else {
        newArr = [];
        myArr.splice(2, 1, tempi);
        i = 0;
      }
      elem.innerHTML = myArr;
      if (i == max && myArr[0] !== max) {
        newArr = [];
        myArr[1]++;
        var tempo = myArr[1];
        pusher(tempo);
        var string3 = newArr.join('');
        newArr = string3.split('');
        if (newArr.length > 1) {
          tempo = parseInt(newArr[1]);
          myArr.splice(1, 1, tempo);
        } else {
          newArr = [];
          myArr.splice(1, 1, tempo);
          i = 0;
        }
        myArr[2] = 0;
        elem.innerHTML = myArr;
        if (i == max && myArr[0] !== max) {
          newArr = [];
          myArr[0]++;
          var tempa = myArr[0];
          pusher(tempa);
          var string4 = newArr.join('');
          newArr = string4.split('');
          if (newArr.length > 1) {
            tempa = parseInt(newArr[1]);
            myArr.splice(0, 1, tempa);
          } else {
            newArr = [];
            myArr.splice(0, 1, tempa);
            i = 0;
          }
          myArr[1] = 0;
          myArr.unshift(1);
          elem.innerHTML = myArr;
        }
      }
    } else if (myArr[0] == max /&& myArr[1]==max*/ ) {
      break;
    }
  };
}
counter();

<div id="myArray">start</div>

Он не оптимизирован, конечно, но, поскольку я новичок, для меня уже счастье, что он что-то делает.))

var myArr = [9, 9, 8, 4];
var newArr = [];
var elem = document.getElementById("myArray");
elem.innerHTML = myArr;
function counter() {
  var max = 10;
  var min = 1;
  var end = 10;
  var changeValCounter = 0;
  for (var i = myArr[3]; i <= max; i++) {
    /приравниваем временную переменную к "i", чтобы работать 
    со значением "i" не влияя на цикл/
    var temp = i;
    /полученное значение вставляем в новый массив/
    function pusher(val) {
      newArr.push(val);
    }
    pusher(temp);
    /получаем строку из цифры в массиве, чтобы в последствии применить метод split для 
    двузначных чисел и десятки отправить в следующий разряд данного нам массива, а единицы
    оставить/
    var string1 = newArr.join('');
    /разделяем, если есть что разделять/
    newArr = string1.split('');
    /если длина newArr больше 1, то есть полученное число двузначное/
    if (newArr.length > 1) {
      /то берем второй элемент массива (еденицы, который будет равен нолю) и превращаем его из строки в цифру/
      temp = parseInt(newArr[1]);
      /вырезаем четвертый (последний) элемент данного массива и заменяем его значением temp, добиваясь таким образом обнуления разряда единиц после 9/
      myArr.splice(3, 1, temp);
      /если длина массива равна единице,/
    } else {
      /* то, обнуляем значение newArr и /
      newArr = [];
      myArr.splice(3, 1, i);
    }
    /заменяем данный массив на странице новым массивом с новыми данными/
    function changeVal(myArr) {
      setTimeout(function() {
        elem.innerHTML = myArr;
      }, ++changeValCounter  1000);
    }
    changeVal(myArr.slice());
    if (i == max && myArr[0] !== max) {
      newArr = [];
      myArr[2]++;
      var tempi = myArr[2];
      pusher(tempi);
      var string2 = newArr.join('');
      newArr = string2.split('');
      if (newArr.length > 1) {
        tempi = parseInt(newArr[1]);
        myArr.splice(2, 1, tempi);
      } else {
        newArr = [];
        myArr.splice(2, 1, tempi);
        i = 0;
      }
      elem.innerHTML = myArr;
      if (i == max && myArr[0] !== max) {
        newArr = [];
        myArr[1]++;
        var tempo = myArr[1];
        pusher(tempo);
        var string3 = newArr.join('');
        newArr = string3.split('');
        if (newArr.length > 1) {
          tempo = parseInt(newArr[1]);
          myArr.splice(1, 1, tempo);
        } else {
          newArr = [];
          myArr.splice(1, 1, tempo);
          i = 0;
        }
        myArr[2] = 0;
        elem.innerHTML = myArr;
        if (i == max && myArr[0] !== max) {
          newArr = [];
          myArr[0]++;
          var tempa = myArr[0];
          pusher(tempa);
          var string4 = newArr.join('');
          newArr = string4.split('');
          if (newArr.length > 1) {
            tempa = parseInt(newArr[1]);
            myArr.splice(0, 1, tempa);
          } else {
            newArr = [];
            myArr.splice(0, 1, tempa);
            i = 0;
          }
          myArr[1] = 0;
          myArr.unshift(1);
          elem.innerHTML = myArr;
        }
      }
    } else if (myArr[0] == max /&& myArr[1]==max/ ) {
      break;
    }
  };
}
counter();

<div id="myArray">start</div>

ответ из предыдущего подобного вопроса никак не помог мне. код не работает — Alexandr Shmidt, Dec 27 '17 at 17:05
почему ты думаешь, что код не работает? — Grundy, Dec 27 '17 at 17:19
function changeVal(myArr){ ... } ... changeVal(myArr.slice()); только вряд ли Вы это увидите: setTimeout(..., i * 3000); — , Dec 27 '17 at 17:23
а почему я могу это не увидеть, Игорь? — Alexandr Shmidt, Dec 27 '17 at 18:09
Grundy, можешь объяснить? Все говорят загадками. А мне надо как новичку - растолковать. — Alexandr Shmidt, Dec 27 '17 at 18:10
ты одному элементу элем, через 3 секунды меняешь 6 раз текст. Все работает именно так как ты хотел, просто так быстро, что ты не успеваешь заметить — Grundy, Dec 27 '17 at 18:29
@AlexandrShmidt Попробую :). Это именно вопрос про асинхронную функцию, которую Вы подаете в setTimeout. Все Ваши таймауты выполнятся через три секунды после цикла с одной и той же переменной myArr. — , Dec 27 '17 at 18:30
хорошо, спасибо. но что мне нужно сделать, чтобы мой счетчик считал с интервалом в три секунды, и при этом эмулировалась реактивность (мгновенное отображение нового состояния массива на экране? — Alexandr Shmidt, Dec 28 '17 at 14:02
@AlexandrShmidt я же написал Вам код в комментарии. Скопируйте его к себе в нужные места. — , Dec 28 '17 at 15:28

не могу понять, почему данный код не работает в цикле

0 Answers0