Как выполнить одну и ту же функцию javascript на каждой странице, загруженной с помощью jquery mobile

Question

Мне нужна помощь, чтобы разобраться в этом коде, цель для каждой загруженной страницы, чтобы показать изображения массива в течение 3 секунд.

Первая страница работает нормально.Проблема в том, что с каждой страницей, загруженной после первой, изображения меняются быстрее.

<div data-role="page" id="page1" class="banners">
 <div data-role="main" class="ui-content">
  <div class="patrocinadores" align="center">
      <img src="" width="100%" class="bannerPatrocinador">
  </div>
 </div>
</div>

<div data-role="page" id="page2" class="banners">
 <div data-role="main" class="ui-content">
  <div class="patrocinadores" align="center">
      <img src="" width="100%" class="bannerPatrocinador">
  </div>
 </div>
</div>

<div data-role="page" id="page3" class="banners">
 <div data-role="main" class="ui-content">
  <div class="patrocinadores" align="center">
      <img src="" width="100%" class="bannerPatrocinador">
  </div>
 </div>
</div>



<script>
    $('.banners').on("pagecreate",function(event){

      clearInterval(trocarImagem);

        let cmpBanner1 = localStorage.getItem("cmpBanner1");
        let cmpBanner2 = localStorage.getItem("cmpBanner2");
        let cmpBanner3 = localStorage.getItem("cmpBanner3");
        let cmpLink1 = localStorage.getItem("cmpLink1");
        let cmpLink2 = localStorage.getItem("cmpLink2");
        let cmpLink3 = localStorage.getItem("cmpLink3");

        let imagens = ["adm/img/mkt/"+cmpBanner1, "adm/img/mkt/"+cmpBanner2+"", "adm/img/mkt/"+cmpBanner3+""];
        let imagemAtual = 0;
        function trocarImagem(){
          imagemAtual = (imagemAtual + 1) % 3;
          var teste = $('.bannerPatrocinador').attr('src',imagens[imagemAtual]);
        }

       setInterval(trocarImagem, 3000);

    });
</script>

Answer 1

В вашем коде есть несколько проблем:

1. clearInterval должен принимать setInterval в качестве переменной, а не функцию, которую вы вызываете через setInterval
2. $ ('. BannerPatrocinador').attr ('src', IMAGE);- Это добавит изображения в каждое поле bannerPatrocinador img, а не только на активной странице.
3. Повторное использование одних и тех же классов в приложении jquery Mobile нецелесообразно, поскольку все загружается в DOM, поэтому есть хороший шанс, что вы получите к нему доступ.несколько предметов одновременно.
4. Забудьте jQuery Mobile, он мертв, и никакое количество некромантии не вернет его к жизни

Рабочий пример: http://jsfiddle.net/ws5p6nbk/

var interval;
var imagemAtual = 0;

function trocarImagem() {
  var imagens = ["https://s3.amazonaws.com/wmfeimages/wp-content/uploads/2018/09/27182802/4189366235_060e3e8e6f_z.jpg", "https://media.mnn.com/assets/images/2019/02/lexi.JPG.653x0_q80_crop-smart.jpg", "https://assets3.thrillist.com/v1/image/2709211/size/tmg-article_tall.jpg"];
  console.log(imagemAtual);
  imagemAtual = (imagemAtual + 1) % 3;
  var activePage = $.mobile.activePage;
  activePage.find('.bannerPatrocinador').attr('src', imagens[imagemAtual]);
}

$(document).on("pagecreate", '.banners', function(event) {

  clearInterval(interval);

  interval = setInterval(trocarImagem, 3000);

});

Пожалуйста, проверьте эти изменения и примите ответ, если вы удовлетворены.