页面跳转后在返回上一页，清除定时器

Question

有一个需求是点击商品就会弹出一个遮罩层，中间是一个等待加载状态的gif图，如果网络状态不好30s后还没有跳转，就提示当前网络状态不佳。过三秒后遮罩层消失。ios真机上测了一下，当点击商品的时候跳转到商品详情页，在点击返回上一页的时候遮罩层依然存在，要过30s后才消失。如何解决这个问题

  function Load() {
         var load = document.createElement('div');
         load.className='load_ctn';
         var load_img = document.createElement('img');
         load_img.src="/public/images/loading.gif"
         load_img.className="load_pic";
         load.appendChild(load_img);
         document.body.appendChild(load);
         var timer = setTimeout(function() {
           var network = document.createElement('div');
           network.className="network"; 
           network.innerHTML="您当前网络状态不佳，请稍后再试";
          load.removeChild(load_img);
          load.appendChild(network);
          setTimeout(function() {
              load.parentNode.removeChild(load)
              
          },3000)
         },30000)
     }

 $("a").click(function() {
         Load();
     })

Answer 1

var time = setTimeout(function() {
    load.parentNode.removeChild(load)  
},3000)

//跳到商品详情页的时候移除setTimeout这个定时器
clearTimeout(time)

Answer 2

出个简单的办法，在每次进入商品页的时候都对页面进行一次初始化。。。这样可以在最短时间内解决一些问题，而且副作用很小