javascript要实现这样的功能:在网页上设置一个时间倒计时器,进入页面以后触发调用一个js函数A(),A函数负责驱动一个外设装置,等待客户从设备输入以后,才能够得到函数的返回值。整个过程可能会很长,如果客户长时间不输入,20秒后函数返回超时标志,也就是说这个函数的执行时间最长为20秒。
倒计时器从执行函数A开始计时,到获取得到返回值的时候停止,请问应该如何实现。
采用window.setinterval能够实现计时器功能,问题在于如何保证,在函数执行同时开始计时,函数执行完成后停止。

解决方案 »

  1.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script type="text/javascript">
    var p="";
    var c=20;
    function init(){
    p=window.setTimeout("init()",1000);
    c-=1;
    document.getElementById("xx").innerHTML=c;
    if(c==0){
    alert("time out");
    window.clearTimeout(p);
    }
    }
    function mm(){
    var a=document.getElementById("test").value;
    if(a=="test"){
    window.clearTimeout(p);
    }
    }
    window.onload=init;
    </script>
    </head><body>
    <input type="text" id="test"><input type="button" onclick="mm()"><div id="xx"></div>
    </body>
    </html>
    不很明白你的意思
      

  2.   

    按照您的方法试了一下,问题还是不能解决,这是我按照您的思路修改后的代码:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript">
    var p="";
    var q = "";
    var c=20;function   sleep(n)
        {
            var   start=new   Date().getTime();
            while(true)   if(new   Date().getTime()-start> n)   break;
        } function A()
    {
    alert('begin');
    sleep(10000);
     document.getElementById("test").value = 'test'; 
     alert('end');  
    }
    function loop()
    {
    init();
    window.setTimeout("A()",100);
    }
    function init(){
    p=window.setTimeout("init()",1000);
    c-=1;
    document.getElementById("xx").innerHTML=c;
    var a=document.getElementById("test").value;
    if(c==0 || a == 'test'){
    alert("time out");
    window.clearTimeout(p);
    }
    }window.onload=loop;
    </script>
    </head><body>
    <input type="text" id="test"><input type="button" onclick="mm()"><div id="xx"></div>
    </body>
    </html>
      

  3.   

    需求是,在弹出begin和end的间隔时间中,计时器xx依然在按照每秒减1的方式跳动。
      

  4.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script type="text/javascript">
    var cd = 20;
    var FLAG = true; //超时标志
    //倒计时函数
    function countdown() {
    var timer = document.getElementById('timer');
    if (cd == 1) {
    FLAG = false;
    timer.innerHTML = '已超时';
    clearInterval(t);
    }
    else timer.innerHTML = -- cd;
    }window.onload = function() {
    t = window.setInterval('countdown()', 1000);
    }
    </script>
    </head><body>
    <span id="timer"></span>
    <input type="text" id="txt" style="display:none;" />
    </body>
    </html>
      

  5.   

    此问题涉及到javascript的多线程机制,但是调用的函数会导致线程阻塞,取消此需求。