关于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();但是我应该去怎么写那个清除呢？
...全文
167 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
  • 打赏
  • 举报
 回复
自己顶一下自己 希望有了解的人能够告诉我一下
距离某一时间的时间倒计时代码，当到达此时间时告诉已经到达倒计时停
距离某一时间的时间倒计时代码，当到达此时间时告诉已经到达倒计时停 距离某一时间的时间倒计时代码，当到达此时间时告诉已经到达倒计时停
JavaScript实现网页跨年倒计时
JavaScript网页–跨年倒计时，供大家参考，具体内容如下 最近学弟在追一个学妹，我在帮学弟出谋划策。 学妹告诉学弟，我怕我们之间是因为这段时间接触多了你才喜欢我的。等跨年的时候，如果你还喜欢我，那个时候我再给你答案。 于是今天我帮学弟做了一个跨年倒计时的网页，希望他能够坚持下去。 <!DOCTYPE html> <html lang=zh-CN> <head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0> <title>倒计时</
前端H5+CSS3+JS综合项目实战精讲
课程收获： 掌握html、css、html5、css3、javascript等综合进行网页前端设计 掌握异步请求接口中的数据并拼接在前端 掌握轮播图的实现方法 掌握倒计时的实现方法 掌握搜索建议提示实现方法 掌握阿里矢量图标的应用
使用微信内嵌H5网页解决JS倒计时失效问题
最近参考项目开发，遇到这样一个需求将H5商城页面嵌套到公司微信公众号里，在开发遇到一个棘手的问题，js倒计时失效问题，怎么回事呢？下面说下我使用微信内嵌h5解决的这一问题，需要的朋友参考下吧
js实现自动倒计时按钮30秒后可用.zip
js实现自动倒计时按钮30秒后可用.zip
JavaScript

87,955

社区成员

224,621

社区内容

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

加载中

查看更多榜单
社区公告
暂无公告

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

+ 用AI写文章