关于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();但是我应该去怎么写那个清除呢？
...全文
151 8 打赏 收藏 举报
写回复
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
  • 打赏
  • 举报
 回复
自己顶一下自己 希望有了解的人能够告诉我一下
相关推荐
C# Task.ConfigureAwait方法能来做什么？
一.ConfigureAwait作用是什么？ Configures an awaiter used to await this System.Threading.Tasks.Task. 配置一个等待Task的awaiter 其实真的没有理解这句话的含义，希望有知道意义的可以告诉我一下.. 二.场景： 1.在非UI程序中使用Task.ConfigureAwait： 先来看看不使用这个方...
html实现圆形计时器特效,如何用css3实现圆形倒计时
背景：因开发需求需要实现一个圆形倒计时功能，具体的倒计时时间是根据功能来；查了一些资料，最终确定用css3和js来完成实现效果如下：倒计时效果图白色圆弧部分是已经过去的时间，中间的文案是倒计时所剩时间旋转采用css3的动画样式transform的rotate属性实现，动态效果则结合js的setInterval实现HTML代码结构：实现该功能可理解为需要拆分成四部分代码块：左边半圆，右边半圆[分两个...
网页布局时遇到的问题~
移动端布局问题，知道为什么的同学，拜托告诉我一下，跪谢
uniapp下拉框组件
之前写过一个小程序的，引入单个下拉框是没有问题的，但是一个页面引入多个下拉框组件的话就会有bug，比如可以同时展开多个下拉框的问题，在此修复了。如果大家有什么好的办法可以告诉我一下嘛~如果想在js中输出this.isjiantou0 this.isjiantou1 this.isjiantou2 ...，可以使用模板字符串。
2020-10-25
救命啊，不知道为什么我搞不好 Ubuntu系统安装 然后就是系统和界面不匹配 请问是什么问题，有朋友可以告诉我一下吗？谢谢！
发帖
JavaScript

8.7w+

社区成员

22.4w+

社区内容

Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
帖子事件
创建了帖子
2015-06-25 10:50
社区公告
暂无公告