zoukankan      html  css  js  c++  java
  • 多次使用setInterval方法导致clearInterval不能成功关闭

    以下作为示例:
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>显示网页时钟</title>
        </head>
    	<body>
    		<script>
    			function displayTime(){
    				var time = new Date();
    				var strTime = time.toLocaleString();
    				document.getElementById("timeDiv").innerHTML = strTime;
    			}
    			function start(){
    				s = window.setInterval("displayTime()",1000);
    			}
    			function stop(){
    				window.clearInterval(s);
    			}
    		</script>
    		<input type="button" value="显示系统时间" onclick="start()" />
    		<input type="button" value="停止显示系统时间" onclick="stop()" />
    		<div id="timeDiv"></div>
    	</body>
    </html>
    

    在这里插入图片描述
    在多次点击显示系统时间按钮的情况下,再点击停止显示系统时间,这时发现无法停止。

    原因

    1、多次点击显示系统时间按钮的话,会导致setInterval的ID值不断变化,每点一次ID值加1。
    2、这样clearInterval获取到的ID值就只是当前的ID值。
    3、之前的对应ID值发生的事件就无法停止。多次点击没有把之前的任务覆盖,而是增加了。

    解决办法

    加一个flag标记,使得setInterval只能执行一次,并且必须在clearInterval执行后才能执行第二次。形成相互约束。

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>显示网页时钟</title>
        </head>
    	<body>
    		<script>
    			//flag标记
    			var flag = true;
    			function displayTime(){
    				var time = new Date();
    				var strTime = time.toLocaleString();
    				document.getElementById("timeDiv").innerHTML = strTime;
    			}
    			function start(){
    				//设置权限flag,使start、stop都只能执行一次
    				if(flag){
    					s = window.setInterval("displayTime()",1000);
    					flag = false;
    				}
    			}
    			function stop(){
    				if(!flag){
    					window.clearInterval(s);
    					flag = true;
    				}
    			}
    		</script>
    		<input type="button" value="显示系统时间" onclick="start()" />
    		<input type="button" value="停止显示系统时间" onclick="stop()" />
    		<div id="timeDiv"></div>
    	</body>
    </html>
    
  • 相关阅读:
    maya绝招(1-20)
    maya 操作自我整理(二)
    maya 操作自我整理(一)
    让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法
    SAP MM Consignment 寄售库存
    java或者jsp中修复会话标识未更新漏洞
    强大!基于拖放布局的 Twitter Bootstrap 网站生成器
    mysql 2003 10038 连接不上的解决
    STRUTS2 标签 循环次数
    tomcat 启用Gzip 压缩进行优化
  • 原文地址:https://www.cnblogs.com/yu011/p/13654023.html
Copyright © 2011-2022 走看看