dimanche 5 novembre 2017

Using locally stored variable to clearInterval

I have a button on a page, when clicked it links to another page and sets a locally stored variable to "true". On the new page, I have a div that is hidden with a setInterval function. I would like for said setInterval to not fire if the variable is set to "true".

HTML:

<!--Page 1-->
<a href="page2.html">
  <div id="view" class="mainButton">view progress</div>
</a>

<!--Page 2-->
<div id="showChart">
  <p>view progress</p>
</div>

<div id="containChart">
  <!--Chart-->
  <canvas id="theChart" width="400" height="400"></canvas>
  <!--Back to Profile-->
  <div id="closeChart">close</div>
</div>

JavaScript (some jQuery):

displayChart();

var timeIt;

function displayChart() // Hides chart shortly after loading of page.
{
  var timeIt = setTimeout(function()
  {
    document.getElementById("containChart").style.display = "none";
  }, 0.1);

  var condition = localStorage.quickAccess;
  if(condition === true)
  {
    clearTimeout(timeIt);
  }
}

// Keep chart displayed if clicked.
$("#view").click(function()
{
  localStorage.quickAccess = true;
});

// Show Progress Chart.
$("#showChart").click(function()
{
  $("#containChart").css("display", "block");
  console.log(localStorage.quickAccess); // Logs correctly: if "#view" was clicked returns "true".
});

// Hide Progress Chart.
$("#closeChart").click(function()
{
  $("#containChart").css("display", "none");
});

Aucun commentaire:

Enregistrer un commentaire