Setelah memuat halaman yang saya butuhkan:

  • tunggu 7 detik
  • aniwrap.text() - LOREM IPSUM
  • tunggu 7 detik
  • aniwrap.text() - DOLOR SIT
  • dan seterusnya - mengulangi jeda dan mengubah teks

Dalam percobaan saya - saya hanya memiliki teks kedua, tanpa yang pertama

Ada bantuan?

var i;
var txt = '';
var arra = ["LOREM IPSUM", "DOLOR SIT"];
var aniwrap = $('#aniwrap');

function write() {
  if (i < txt.length) {
    document.getElementById("aniwrap").innerHTML += txt.charAt(i);
    i++;
    setTimeout(write, 70);
  }
}

function single(){
    $(arra).each(function(el, val){
        setTimeout(function(){
            aniwrap.text('');
            i = 0;
            console.log(val);
            txt = val;
            write();
        }, 7000);
    });
}

$(window).on('load', function(){
    setInterval(single, 7000);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='aniwrap'></div>
3
qadenza 10 Januari 2021, 04:33

3 jawaban

Jawaban Terbaik

Deklarasikan variabel yang menentukan indeks kata dalam larik arra:

var index = 0;

Saya menghapus metode each() dan melakukannya dengan cara yang berbeda:

function single(){
  setTimeout(function(){
    index++;
      ...
      txt = arra[index % arra.length];
      ...
  }, 7000);
}
var i;
var index = 0;
var txt = '';
var arra = ["LOREM IPSUM", "DOLOR SIT"];
var aniwrap = $('#aniwrap');

function write() {
  if (i < txt.length) {
    document.getElementById("aniwrap").innerHTML += txt.charAt(i);
    i++;
    setTimeout(write, 70);
  }
}

function single(){
  setTimeout(function(){
    index++;
      aniwrap.text('');
      i = 0;
      console.log(arra[index % arra.length]);
      txt = arra[index % arra.length];
      write();
  }, 7000);
}

$(window).on('load', function(){
    setInterval(single, 7000);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='aniwrap'></div>
1
s.kuznetsov 10 Januari 2021, 03:13

Anda memiliki beberapa masalah: $(element/selector).each(cb) adalah untuk objek jQuery, yang Anda inginkan untuk iterasi pada array adalah $.each(array, cb) (atau hanya array.forEach. Masalah lainnya adalah Anda membuat setTimeouts dalam loop, pada waktu yang sama). Kecuali saya melewatkan sesuatu, Anda sebenarnya tidak memerlukan loop atau setTimeout di single sama sekali.

var idx = 0;
function single() {
  if (idx == arra.length) {
    idx = 0;
  }
  var val = arra[idx];
  aniwrap.text('');
  idx++;
  i = 0;
  txt = val;
  write();
}
1
Zac Anger 10 Januari 2021, 02:55

Fungsi single menyiapkan dua panggilan balik pengatur waktu yang akan dijalankan secara berurutan tetapi kurang lebih segera satu demi satu (keduanya menggunakan pengatur waktu 7000 ms).

Pada pewaktu pertama callback i disetel ke 0 dan txt ke LOREM IPSUM, dan write akan menampilkan huruf pertama L.

Sebelum penyegaran halaman terjadi (dalam banyak kasus), panggilan balik pewaktu kedua dijalankan, yang menghapus konten teks #aniwrap, menyetel ulang penunjuk karakter i kembali ke nol dan mengganti teks dengan DOLOR SIT.

Sekarang write akan terus mengeluarkan DOLOR SIT satu huruf pada satu waktu, tetapi karena pengatur waktu yang dibuat pada panggilan pertama ke write tidak pernah dibatalkan, dengan kecepatan dua kali lipat yang diantisipasi.

Ini adalah masalah waktu. Salah satu cara untuk menyelesaikannya adalah dengan mengatur waktu tunda yang berbeda untuk setiap baris dalam arra, dengan pilihan lain adalah menggunakan pengatur waktu 7000 ms tunggal untuk menulis satu baris dan kemudian memanggil dirinya sendiri kembali untuk baris berikutnya dengan pengatur waktu.

Berikut adalah contoh opsi pertama dengan modifikasi minimum dari kode yang diposting:

"use strict";
var i;
var txt = '';
var arra = ["LOREM IPSUM", "DOLOR SIT"];
var aniwrap = $('#aniwrap');

function write() {
  if (i < txt.length) {
    document.getElementById("aniwrap").innerHTML += txt.charAt(i);
    i++;
    setTimeout(write, 70);
  }
}

function single(){
    $(arra).each(function(index, val){  // argument name change
        setTimeout(function(){
            aniwrap.text('');
            i = 0;
            console.log(val);
            txt = val;
            write();
        }, 3500 * index);  // <-- change
    });
}

$(window).on('load', function(){
    setInterval(single, 7000);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='aniwrap'></div>

Cara ketiga untuk menyelesaikan masalah mungkin dengan menempatkan jeda panjang tetap di antara baris sehingga panjangnya bisa berapa pun (waktu dikurangi untuk contoh ini):

"use strict";
var i;
let lineNum = -1;
var txt = '';
var arra = ["LOREM IPSUM", "DOLOR SIT", "GAUDEAMUS IGITUR"];
var aniwrap = $('#aniwrap');

function write() {
  console.log(txt);
  if (i < txt.length) {
    document.getElementById("aniwrap").innerHTML += txt.charAt(i);
    i++;
    setTimeout(write, 70);
  }
  else setTimeout( nextLine, 3500);
}

function nextLine(){
    lineNum = ++ lineNum % arra.length;
    txt = arra[ lineNum];
    aniwrap.text('');
    i = 0;
    write();
}
 
$(window).on('load', nextLine)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='aniwrap'></div>
1
traktor 10 Januari 2021, 03:49