ローカルに保存された変数をclearIntervalに使用

Question

私はページ上にボタンを持っています。クリックすると別のページにリンクし、ローカルに保存された変数を "true"に設定します。新しいページには、setInterval関数で隠されているdivがあります。変数が "true"に設定されている場合、setIntervalが起動しないようにしたいと思います。

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（いくつかの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"); 
}); 

Answer 1

localStorageは、文字列として入力したものを格納します。

したがってlocalStorage.quickAccess === trueは"true" != trueからfalseを返します。

簡単な方法はlocalStorage.quickAccess === "true"です。

Answer 2

あなたはsetTimeoutをハンドラ内 "条件" の値をテストし、そしておそらくそのようにカバーすることができます。しかし、私はあなたのタイムアウトが "0.1"であり、これはJSが1/10ミリ秒を意味することに気づきます。 1/10秒を意味する場合は、100を使用します。