Mam tutaj AJAX + HTML i wygląda na to, że nie działa tak, jak powinno. Zasadniczo to (praca z / użyj) tylko pierwsza liczba (liczba) i wygląda na to, że reszta została zapomniana?

Mój kod

<script id="ajax">
  var count = 200;
  var counter = setInterval(a2, 1000);

  function a2() {
    count = count - 1;
    if (count < 0) {
      clearInterval(counter);
      return;
    }
    document.getElementById("a2").innerHTML = count;
  }
</script>
<div id="a2"></div>

<script id="ajax">
  var count = 100;
  var counter = setInterval(a3, 1000);

  function a3() {
    count = count - 1;
    if (count < 0) {
      clearInterval(counter);
      return;
    }
    document.getElementById("a3").innerHTML = count;
  }
</script>
<div id="a3"></div>

Czy ktoś wie, co może być problemem? Czuję się całkowicie zagubiony.

Kwestia nr 2: Kiedy wprowadzam skrypt do rzeczywistego użycia, wydaje się, że wykonuje on tylko pierwszy skrypt / kod, a następny skrypt jest wykonywany po upływie czasu pierwszego skryptu. Dlatego drugi zegar wydaje się być pusty, jeśli działa pierwszy.

Działa jednak, gdy ręcznie umieszczam skrypt w konsoli.

Jakieś pomysły?

Dziękuję Ci!

0
MasterSoda01 21 listopad 2019, 05:23

3 odpowiedzi

Problem w tym, że var w JS ma zakres funkcji. Ponieważ użyłeś go poza funkcją, jest prawie globalny w całym skrypcie. Co powiesz na przekształcenie implementacji licznika w funkcję i nazwanie jej w ten sposób?

<script id="ajax">
  function counter (elem, count) {
    var counter = setInterval(func, 1000);

    function func() {
      count = count - 1;
      if (count < 0) {
        clearInterval(counter);
        return;
      }
      document.getElementById(elem).innerHTML = count;
    }
  }
  counter("a2", 200);
</script>
<div id="a2"></div>

<script id="ajax">
  counter("a3", 100);
</script>
<div id="a3"></div>
0
Faisal Rahman Avash 21 listopad 2019, 05:37
Witam, dziękuję, wydaje się, że działa dobrze, ale teraz wpadam na drugi problem, który oznacza, że ​​nie jest wykonywany, lub po prostu pierwszy skrypt, ale druga część nie jest. Oznacza to, że w danym momencie aktywny jest tylko jeden zegar, a po tym, jak ten zegar spadnie poniżej 0, rozpocznie się drugi. Nie wiem, jak mam to naprawić. TLDR: Przechodzi przez ajax i ładuje wszystkie skrypty, ale wykonuje je jeden po drugim, po tym, jak pierwszy zegar spadnie poniżej 0, rozpocznie się drugi.
 – 
MasterSoda01
21 listopad 2019, 14:53
Czy możesz zaktualizować swoje pytanie kodem, którego próbujesz teraz?
 – 
Faisal Rahman Avash
22 listopad 2019, 16:49

Nie, należy dodać dwa kody w jednej funkcji setInterval do wykonywania w tym samym czasie:

var count1=10;
var count2=5;
var counter=setInterval(a2, 1000);
function a2()
{
  if (count1 != 0)
  {
     count1--;
     //Some functions that are dependent of count1, eg.
     if(count1==3){document.getElementById("a2").style.color="red";}
  }
  if (count2 != 0)
  {
     count2--;
     //Some functions that are dependent of count2 eg.
     if(count2==3){document.getElementById("a3").style.color="red";}
  }
  if(count1==0 && count2==0){
 clearInterval(counter);
  }

 console.log('counting!');
 document.getElementById("a2").innerHTML=count1;
 document.getElementById("a3").innerHTML=count2;
}
<div id="a2"></div>
<div id="a3"></div>

Jeśli masz dwie różne funkcje, które są zależne od liczników, użyj powyższego kodu

0
Ritesh Khandekar 21 listopad 2019, 07:24

spróbuj tego

var count_a2 = 200;
var counter_a2 = setInterval(a2, 1000);

function a2() {
  count_a2 = count_a2 - 1;
  if (count_a2 < 0) {
    clearInterval(counter_a2);
    return;
  }
  document.getElementById("a2").innerHTML = count_a2;
}

var count = 100;
var counter = setInterval(a3, 1000);

function a3() {
  count = count - 1;
  if (count < 0) {
    clearInterval(counter);
    return;
  }
  document.getElementById("a3").innerHTML = count;
}
<div id="a2"></div>
<div id="a3"></div>
0
Vinay Kaklotar 21 listopad 2019, 09:52
Dziękuję za udział, który działałby, ale wydaje się, że nie jest tak zoptymalizowany, jeśli mam tutaj dużo kodu.
 – 
MasterSoda01
21 listopad 2019, 14:43