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>

Gajotres · Accepted Answer · 2019-02-18 11:50:40Z

1

There are several problems in your code:

clearInterval should accept setInterval as a variable, not a function you are calling through setInterval
$('.bannerPatrocinador').attr('src', IMAGE); - This will add images to every bannerPatrocinador img box, not only on the active page
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.
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.

edited Feb 18, 2019 at 11:50

answered Feb 18, 2019 at 10:06

Gajotres

57.3k16 gold badges106 silver badges132 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

kernelpanic Over a year ago

Magnificent ! Thank you very much for the help, I will think about your observations regarding JQM. Helped me a lot for now, this place is incredible.

Gajotres Over a year ago

You're welcome. And one small advice, next time you have a JavaScript-related question create a small jsFiddle application (just like one I gave you). People are more likely to help if they have the code they can play with. Especially as everyone is looking for additional reputation :-)

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related