关于js倒计时的问题,谁能来告诉我一下

fanfangchao 2015-06-25 10:50:03
最近在弄答题,其中有段js倒计时20秒 自动跳转到下一题 或者是当我选择选项后,自动跳转下一题,其中倒计时和题是写在一个叫exm的HTML页面中,然后答题的页面answer重复的来调用这个页面exm。

我的exm页面中js写法如下:

<script type="text/javascript">
var num=19;
function startCount() {
document.getElementById('count').innerHTML=num;
num=num-1;
var timer=setTimeout("startCount()",1000);
if(num<=0)
{
clearTimeout(timer);
$(".radios").trigger("change");
}
} </script>


exm页面中HTML写法如下:

<div class="web_boxx">
<div class="web_logo"><img src="__PUBLIC__/pc/images/dati_t.png" /></div>
<h3>{$vo.title}</h3>
</div>
<div class="div20px"></div>
<div class="web_tt">
<div class="web_line">
<input type="radio" name="optionsRadios" id="optionsRadios1" class="radios" value="a"><label for="optionsRadios1"> A.{$vo.question_a}</label>
<div class="web_clear"></div>
</div>
<div class="web_line">
<input type="radio" name="optionsRadios" id="optionsRadios2" class="radios" value="b"><label for="optionsRadios2">B.{$vo.question_b}</label>
<div class="web_clear"></div>
</div>
<div class="web_line">
<input type="radio" name="optionsRadios" id="optionsRadios3" class="radios" value="c"><label for="optionsRadios3">C.{$vo.question_c}</label>
<div class="web_clear"></div>
</div>
<if condition="$vo['question_d'] neq ''">
<div class="web_line">
<input type="radio" name="optionsRadios" id="optionsRadios4" class="radios" value="d"><label for="optionsRadios4">D.{$vo.question_d}</label>
<div class="web_clear"></div>
</div>
</if>
</div>


用的是Thinkphp框架

exm中Ajax写法如下:

<script>
$(document).ready(function(){
setTimeout("startCount()",1000);
$('.radios').on('change', function(){
var position = $('#position').val();
var answer = $('input[name="optionsRadios"]:checked').val();
var eid = $('#eid').val();
var iid = $('#iid').val();
var openid = $('#openid').val();

$.ajax({
url:"{:U('Index/judge')}",
data:{'answer':answer,'eid':eid},
dataType:"json",
type:"post",
success:function(returnData){
if(returnData.status==1){
layer.msg(returnData.msg, {icon: 1});
}else{
layer.msg(returnData.msg, {icon: 2});
}
if(position<20){
$.ajax({
url:"{:U('Index/show')}",
data:{'position': position++,'eid':eid,'answer':answer,'iid':iid,'openid':openid},
dataType:"json",
type:"post",
success:function(retData){
$('#exm').empty();
$('#exm').html(retData);
}
});
}
});
});
</script>



现在出现如下问题:
当我点击选项的时候能够跳转到下一个题,但是倒计时的时间会走的很快,然后我继续选择下一题 倒计时时间会更快,我也能够清楚是什么原因, 应该是timer没有被claerTimeout();但是我应该去怎么写那个清除呢?
...全文
162 8 打赏 收藏 转发到动态 举报
写回复
用AI写文章
8 条回复
切换为时间正序
请发表友善的回复…
发表回复
tianma630 2015-06-30
  • 打赏
  • 举报
回复
引用 7 楼 fanfangchao 的回复:
[quote=引用 6 楼 tianma630 的回复:] [quote=引用 5 楼 fanfangchao 的回复:] [quote=引用 3 楼 tianma630 的回复:] 1、首先setTimeout没必要clear,如果要clear,也应该吧timer设置成全局变量,否则,没运行一次startCount都会创建一个timer,根本不会clear掉。 2、多次按下一步导致走的很快,是因为你没按一次都会有一个新的setTimeout在运行,导致变化速度加快,可以加一个控制参数,参考如下
var timer;
	var num=20;
	var iOn = false; // 是否已经有定时器在运行
    function startCount() {       
		if(iOn){ // 判断是否有定时器在运行,有则不在重新启动定时器,没有则新启动一个定时器
			return ;
		}
		num=20;
        changeCount(); // 为了不受iOn影响,新增一个函数
    }
	
	function changeCount(){
		num=num-1;
		document.getElementById('count').innerHTML=num;
        
		timer=setTimeout("changeCount()",1000); 
		iOn = true; // 表示已经有一个定时器在运行
		if(num<=0)
		{
			iOn = false; // 运行结束,关闭定时器,表示没有定时器在运行,可以重新启动定时器
			clearTimeout(timer);           
			$(".radios").trigger("change");
		}
	}
3、这种需求用setInterval函数更好,楼主可以写个试试
具体要怎么实现您写的这个? 如果可以帮我解决 可以有偿 [/quote]吧我那段js代码 吧你的那段js代码替换了就行[/quote] 但是我需要在什么地方去执行startCount()呢?[/quote]和原来一样
fanfangchao 2015-06-29
  • 打赏
  • 举报
回复
引用 6 楼 tianma630 的回复:
[quote=引用 5 楼 fanfangchao 的回复:] [quote=引用 3 楼 tianma630 的回复:] 1、首先setTimeout没必要clear,如果要clear,也应该吧timer设置成全局变量,否则,没运行一次startCount都会创建一个timer,根本不会clear掉。 2、多次按下一步导致走的很快,是因为你没按一次都会有一个新的setTimeout在运行,导致变化速度加快,可以加一个控制参数,参考如下
var timer;
	var num=20;
	var iOn = false; // 是否已经有定时器在运行
    function startCount() {       
		if(iOn){ // 判断是否有定时器在运行,有则不在重新启动定时器,没有则新启动一个定时器
			return ;
		}
		num=20;
        changeCount(); // 为了不受iOn影响,新增一个函数
    }
	
	function changeCount(){
		num=num-1;
		document.getElementById('count').innerHTML=num;
        
		timer=setTimeout("changeCount()",1000); 
		iOn = true; // 表示已经有一个定时器在运行
		if(num<=0)
		{
			iOn = false; // 运行结束,关闭定时器,表示没有定时器在运行,可以重新启动定时器
			clearTimeout(timer);           
			$(".radios").trigger("change");
		}
	}
3、这种需求用setInterval函数更好,楼主可以写个试试
具体要怎么实现您写的这个? 如果可以帮我解决 可以有偿 [/quote]吧我那段js代码 吧你的那段js代码替换了就行[/quote] 但是我需要在什么地方去执行startCount()呢?
tianma630 2015-06-29
  • 打赏
  • 举报
回复
引用 5 楼 fanfangchao 的回复:
[quote=引用 3 楼 tianma630 的回复:] 1、首先setTimeout没必要clear,如果要clear,也应该吧timer设置成全局变量,否则,没运行一次startCount都会创建一个timer,根本不会clear掉。 2、多次按下一步导致走的很快,是因为你没按一次都会有一个新的setTimeout在运行,导致变化速度加快,可以加一个控制参数,参考如下
var timer;
	var num=20;
	var iOn = false; // 是否已经有定时器在运行
    function startCount() {       
		if(iOn){ // 判断是否有定时器在运行,有则不在重新启动定时器,没有则新启动一个定时器
			return ;
		}
		num=20;
        changeCount(); // 为了不受iOn影响,新增一个函数
    }
	
	function changeCount(){
		num=num-1;
		document.getElementById('count').innerHTML=num;
        
		timer=setTimeout("changeCount()",1000); 
		iOn = true; // 表示已经有一个定时器在运行
		if(num<=0)
		{
			iOn = false; // 运行结束,关闭定时器,表示没有定时器在运行,可以重新启动定时器
			clearTimeout(timer);           
			$(".radios").trigger("change");
		}
	}
3、这种需求用setInterval函数更好,楼主可以写个试试
具体要怎么实现您写的这个? 如果可以帮我解决 可以有偿 [/quote]吧我那段js代码 吧你的那段js代码替换了就行
fanfangchao 2015-06-29
  • 打赏
  • 举报
回复
引用 3 楼 tianma630 的回复:
1、首先setTimeout没必要clear,如果要clear,也应该吧timer设置成全局变量,否则,没运行一次startCount都会创建一个timer,根本不会clear掉。 2、多次按下一步导致走的很快,是因为你没按一次都会有一个新的setTimeout在运行,导致变化速度加快,可以加一个控制参数,参考如下
var timer;
	var num=20;
	var iOn = false; // 是否已经有定时器在运行
    function startCount() {       
		if(iOn){ // 判断是否有定时器在运行,有则不在重新启动定时器,没有则新启动一个定时器
			return ;
		}
		num=20;
        changeCount(); // 为了不受iOn影响,新增一个函数
    }
	
	function changeCount(){
		num=num-1;
		document.getElementById('count').innerHTML=num;
        
		timer=setTimeout("changeCount()",1000); 
		iOn = true; // 表示已经有一个定时器在运行
		if(num<=0)
		{
			iOn = false; // 运行结束,关闭定时器,表示没有定时器在运行,可以重新启动定时器
			clearTimeout(timer);           
			$(".radios").trigger("change");
		}
	}
3、这种需求用setInterval函数更好,楼主可以写个试试
具体要怎么实现您写的这个? 如果可以帮我解决 可以有偿
fanfangchao 2015-06-29
  • 打赏
  • 举报
回复
引用 2 楼 xuzuning 的回复:
1、没有看到 id=exm 的节点 2、计时器应在 ajax 的 success 方法里复位 3、如果计时器代码是通过 $('#exm').html(retData); 写入的,那么新的计时器代码是不会生效的(因为 retData 中的 js 代码不会被执行)
那我应该怎么解决啊? 你说的对 那个exm节点确实是另一个文件里的


<script type="text/javascript">
    $(document).ready(function(){
        var position = {$number} ;
        var openid = '{$openid}';
        var iid = {$log_id};
        $.ajax({
            url:"{:U('Index/show')}",
            data:{'position': position++,'openid':openid,'iid':iid},
            dataType:"json",
            type:"post",
            success:function(retData){
                $('#exm').empty();
                $('#exm').html(retData);
            }
        });
    });
</script>
</head>

<body>
<div class="row" id="exm">
</div></body></html>
tianma630 2015-06-26
  • 打赏
  • 举报
回复
1、首先setTimeout没必要clear,如果要clear,也应该吧timer设置成全局变量,否则,没运行一次startCount都会创建一个timer,根本不会clear掉。 2、多次按下一步导致走的很快,是因为你没按一次都会有一个新的setTimeout在运行,导致变化速度加快,可以加一个控制参数,参考如下
var timer;
	var num=20;
	var iOn = false; // 是否已经有定时器在运行
    function startCount() {       
		if(iOn){ // 判断是否有定时器在运行,有则不在重新启动定时器,没有则新启动一个定时器
			return ;
		}
		num=20;
        changeCount(); // 为了不受iOn影响,新增一个函数
    }
	
	function changeCount(){
		num=num-1;
		document.getElementById('count').innerHTML=num;
        
		timer=setTimeout("changeCount()",1000); 
		iOn = true; // 表示已经有一个定时器在运行
		if(num<=0)
		{
			iOn = false; // 运行结束,关闭定时器,表示没有定时器在运行,可以重新启动定时器
			clearTimeout(timer);           
			$(".radios").trigger("change");
		}
	}
3、这种需求用setInterval函数更好,楼主可以写个试试
xuzuning 2015-06-26
  • 打赏
  • 举报
回复
1、没有看到 id=exm 的节点 2、计时器应在 ajax 的 success 方法里复位 3、如果计时器代码是通过 $('#exm').html(retData); 写入的,那么新的计时器代码是不会生效的(因为 retData 中的 js 代码不会被执行)
fanfangchao 2015-06-25
  • 打赏
  • 举报
回复
自己顶一下自己 希望有了解的人能够告诉我一下

87,885

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧