javascript - Bagaimana untuk memanggil pemasa dalam pembolehubah yang disimpan dalam karusel JS

Question

(function(){
    var timer = null;
    
    hSlider();
    function hSlider() {    
        // 通过数组来控制slider内容切换
        var imgadr = ['images/banner_2.jpg', 'images/banner_3.jpg', 'images/banner_1.jpg'],
          headArray = ['Second Heading', 'Third Heading','First Heading'],
          paraArray = ['First paragraph is awesome!', 'Second paragraph goes here!',
            'Third paragraph for you'
          ],
          slider = document.getElementById('slider'),
          next = document.getElementById('prev'),
          prev = document.getElementById('next'),
          iNow = i = 0;
    
        // 获取slider作为画布,再通过改变数组来修改背景,标题和段落
        function _bg(iNow) {
          slider.style.background = "url(\'" + imgadr[i] + "\') no-repeat center /cover";
          document.getElementById('sliderHeader').innerHTML = headArray[i];
          document.getElementById('sliderPara').innerHTML = paraArray[i];
        }
    
        // 自动循环
        timer = setInterval(function() {
          _bg(iNow);
    
          // 定时器每调动一次,自加一实现切换效果
          i++;
          if (i == imgadr.length)
            i = 0;
    
        }, 3500);
    
        // 上一页
        prev.onclick = function() {
          _bg(iNow);
          clearInterval(timer);
    
          i--;
          if (i == -1)
            i = imgadr.length - 1;
        }
    
        // 下一页
        next.onclick = function() {
          _bg(iNow);
          clearInterval(timer);
    
          i++;
          if (i == imgadr.length)
            i = 0;
         // setInterval(timer); 没有效果
        }
      }
}

Alasannya ialah saya baru-baru ini ingin melaksanakan fungsi karusel skrin penuh, dan kemudian saya bertanya banyak maklumat dan merujuk kod banyak tapak web Kemudian saya mendapati bahawa kebanyakannya adalah kod yang dikelirukan... Saya tidak dapat memahami mereka. Kemudian saya mencipta sendiri gambar karusel yang mudah kerana asas js yang lemah. Anda boleh mengawal penukaran latar belakang dan teks perenggan melalui tatasusunan, dan menetapkan gelung pemasa Setiap kali Tatasusunan gelung i++ berfungsi sebagai karusel Selepas pengawal diklik, "i++" atau "i--" mengawal bahagian atas dan halaman bawah. Apabila diklik, saya ingin mengosongkan pemasa, kemudian melakukan kesan menambah satu pada halaman, dan kemudian menambahnya semula pada Peranti.
Jadi, saya telah menyimpan pemasa dalam a berubah-ubah, jadi bagaimana saya boleh memanggilnya semula?
Anda juga boleh memasukkannya ke dalam fungsi dan memanggilnya semula, tetapi tidakkah itu bagus...?

Answer 1

Seperti ini, saya rasa setTimeout lebih mudah dikawal daripada setInterval:

var timer;
function loop(){
    timer = setTimeout(function() {
        _bg(iNow);
          // 定时器每调动一次,自加一实现切换效果
          i++;
          if (i == imgadr.length)
          i = 0;
          loop();
    }, 3500)
}

//清理的话只要clearTimeout(timer)就行了，然后重新调用loop