js事件监控setInterval用法和实例

在学习 JavaScript 过程中，我们除了对基础知识有一定了解理解之外，还需要从底层去认识部分函数的用法及其效果。

setInterval底层原理

下面我们主要学习js 事件监控的setInterval函数，以及举一个简单的监控实例，帮助大家理解研究。

更多精彩内容请看 web 前端中文站
http://www.lisa33xiaoq.net 可按 Ctrl + D 进行收藏

? ? ? ?定义和用法

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

? ? ? ?语法

setInterval(code,millisec[,”lang”])

? ? ? ?返回值

一个可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的值。

? ? ? ? 实例运用

下面是 html 的主要代码，大家可以下载下来研究实践下。

 <script>
 window.onload = function(){
     screenfunction();
     }
 function screenfunction(){
     var blackcolor = document.getElementById("blackScreen");
     var timer = 0; //定时时间
     var _timer = 0;
     var gotime = 0; //经过的时间
     var timerparam = 5;
 
     console.log("123");

     //1 秒监控一次 /*www.lisa33xiaoq.net*/
     timer = setInterval(function(){
       //console.log(gotime);
  
       if(gotime >= timerparam){
       blackcolor.style.display = 'block';
       clearInterval(timer);
     }
     gotime ++;
     }, 1000);
 
     //鼠标按下，恢复原样
     document.onmousedown = function(event){
     blackcolor.style.display = 'none';
     }
 
     document.onmouseup = function(event){
        gotime = 0;
        _timer = setInterval(function(){ 
        if(gotime >= timerparam){
        blackcolor.style.display = 'block';
        clearInterval(_timer);
     }
     gotime ++;
     }, 1000);
   }
 }
</script>

在线演示

百度网盘下载 ? ? ?密码：i4em

web 前端中文站点评：

在学习 web 前端，要注意基础知识的牢固掌握，这样我们才能在运用中游刃有余。细节很重要，大家有兴趣可以参考JavaScript 标准参考教程(英文标题：JavaScript Standards Reference Guide；作者：阮一峰)