javascript - html5 JavaScript，全局变量

Question

如何创建在页面加载时定义的变量而不是在脚本中定义的变量？

<script> 
    var comp = 0;
    function mMove(e)
    {        
        var x = e.screenX;           
        if (x > comp + 80)
        {
            comp = x;
            somethingcool();
        }       
    }        
</script>

    <video id="vid_ID" onclick="vidclick()" onmousemove="mMove(event)" controls tabindex="0" autobuffer preload>
        <source type="video/mp4; codecs=&quot;avc1.42E01E, mp4a.40.2&quot;" src="test.mp4"></source>
        <p>Sorry, your browser does not support the &lt;video&gt; element.</p>
    </video>

我有一些视频和 onmousemove 事件。我想在每次鼠标沿 x 轴移动 80 像素时运行 somethingcool() 函数。我需要某种方法来存储 comp 变量。

Answer 1

在您提到您正在重新加载包含脚本的页面之后。问题是显而易见的。 您正在覆盖这些值。所以这里是可能的解决方案

解决方案

1. 确保将变量声明移出该页面。将其移至主页。否则，每次加载该页面时，该值都会被设置回 0。

2.使用LocalStorage来存储值。你可以做到这一点。

<script> 

   if(localStorage.getItem("compValue")){  //First time page load storage will be undefined set the value to 0. On consecutive calls this if block will not execute and hence value will not be overwritten.
     localStorage.setItem("compValue", 0);
   }

    var comp = localStorage.getItem("compValue"); //read from storage
    function mMove(e)
    {        
        var x = e.screenX;           
        if (x > comp + 80)
        {
            comp = x;
            somethingcool();
        }       
    }        
</script>

我更喜欢选项 1，因为使用存储的任务并不复杂。只需将变量设置为全局变量并注意不要覆盖它