How to execute the same javascript function on each page loaded with jquery mobile

Question

I need help to sort out this code, the goal is for each page loaded to show the array images for 3 seconds.

The first page works OK. The problem is that every page loaded after the first one the images change faster.

 <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

There are several problems in your code:

1. clearInterval should accept setInterval as a variable, not a function you are calling through setInterval
2. $('.bannerPatrocinador').attr('src', IMAGE); - This will add images to every bannerPatrocinador img box, not only on the active page
3. It is not smart to reuse same class names in jquery Mobile application as everything is loaded into DOM so there's a good chance you will access multiple items at the same time.
4. Forget jQuery Mobile, it's dead and no amount of necromancy will bring it back to life

Working example: 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);

});

Please test these changes and accept the answer if you are satisfied.