动态图像页脚Jquery Mobile

Question

我正在尝试将我的页脚转换为每隔30秒更改图像的广告横幅。我正在使用set interval来调用拉动这些图像的函数。但是，当我切换页面时，间隔仍然在运行。我希望在每个新页面上它停止间隔获取图像将其放入页脚然后每30秒更改一次。我应该将页脚设置为某种类型，因为有时图像不会加载，最后它会重叠某些内容。

我的代码如下：

  //footer ads function
 function adsFunction() {
  var adurl = "http://kewsplus.com/includes/ads.php";
$.ajax({
    type: "GET",
        url: adurl,
        dataType: "jsonp",
        cache : false,
        jsonp : "onJSONPLoad",
        jsonpCallback: "footeradscallback",
        crossDomain: "true",
        success: function (data) {
         //alert("success");
        },
        error: function(){ 
            //$.mobile.changePage("./error.html");
            alert("error with footer");
        }
});
}

//callback for footer ads
function footeradscallback(rtndata) 
{ 
for(j=0;j<=rtndata.length -1;j++)
{
    var data = "<img src="+rtndata[j].ad_url+" alt="+rtndata[j].ad_name+">";
}
$('#ads').html(data);
}

//when loading a page
$(document).on( "pagebeforeshow", "#somepage", function( e ) {
clearInterval(timerId);
adsFunction();
timerId = setInterval(adsFunction, 30000);
});