Javascript setTimeout-recursion不适用于Chrome和Firefox

下面的代码用于在另一个隐藏的溢出div（未来网站的概念）中滑动div。 “下一个”和“前一个”链接下方的文本框用于指示x值。使用IE8一切正常。Javascript setTimeout-recursion不适用于Chrome和Firefox

有了Chrome和Firefox，它似乎只能执行一次（一步）“下一个”和“上一个”功能，这意味着setTimeout不会运行。

<html> 
    <meta http-equiv="Content-Script-Type" content="text/javascript"> 
    <head> 
     <script type="text/javascript"> 

      var ie5 = (document.all && document.getElementById); 
      var ns6 = (!document.all && document.getElementById); 

      function next(startx, fadeStep, end){ 
       if(startx > end){ 
        startx -= Math.round((1/Math.pow(fadeStep,0.6))); 
        if (startx < end) startx = end; 
        document.getElementById('lastname').value = startx + "px"; 
        document.getElementById('test1').style.left = startx + "px"; 
        fadeStep += 0.00035; 
        args = "next(" + startx + "," + fadeStep + "," + end + ")"; 
        setTimeout(args, 20); 
       } 
      } 

      function prev(startx, fadeStep, end){ 
       if(startx < end){ 
        startx += Math.round((1/Math.pow(fadeStep,0.6))); 
        if (startx > end) startx = end; 
        document.getElementById('lastname').value = startx + "px"; 
        document.getElementById('test1').style.left = startx + "px"; 

        setTimeout('prev(' + startx + ',' + (fadeStep+0.00035) + ',' + end + ')', 20); 
       } 
      } 

     </script> 
    </head> 
    <body> 
     <div style="position:relative;width:570;height:78;overflow:hidden"> 
      <div id="test1" style="position:absolute;left:0px;top:0px;width:1180;height:78"> 
       <img src="http://img38.imageshack.us/img38/7225/imageva.png" border=1> 
       <img src="http://img577.imageshack.us/img577/5554/image2te.png" border=1> 
      </div> 
     </div> 
     <div style="position:absolute;left:900px;top:0px;width:800"> 
      <a href="#" onclick="next(0, 0.001, -570)">Next</a><br /> 
      <a href="#" onclick="prev(-570, 0.001, 0)">Previous</a></ br> 
      <form><input type="text" id="lastname" value="gfgfg"/></form> 
     </div> 

    </body> 
</html>

您能否协助？

来源

2012-01-27 Mark

我认为你的代码会大大简化，如果你使用类似jQuery的东西。 – cambraca 2012-01-27 20:30:44

你尝试传递实际的函数而不是字符串setTimeout？ 'setTimeout（function（）{next（startX，fadeStep，end）;}，20）' – hugomg 2012-01-27 20:35:43

我对这两种浏览器都没有问题...... – JayC 2012-01-27 21:32:14

它可能是一个更好的办法，在这种情况下，使用的setTimeout像下面这样：“窗口”

window.setTimeout(function() { next(startx, fadeStep, end); } , delayInMiliseconds);

然而，缺乏的对象前缀可能是您的功能在这些浏览器中不起作用的另一个原因。

如果您有任何其他问题，请不要犹豫，问问。

正如在评论中所述，它将节省大量的时间来使用jQuery。

最好的问候，

来源

2012-01-27 20:32:48

“setTimeout（function（）{next（startX，fadeStep ，end）;}，20）“ 和”window.setTimeout（function（）{next（startX，fadeStep，end）;}，20）“也适用于IE8，但不适用于Chrome和FF。也许是因为我在本地尝试它，并且一些JS元素被阻止？ – Mark 2012-01-27 20:53:01

顺便说一句在jQuery中有这个准备好的代码吗？从未在 – Mark 2012-01-27 21:00:57

之前使用过。例如，您可以使用jQuery的动画功能：http://api.jquery.com/animate/ – 2012-01-27 21:29:43

Javascript setTimeout-recursion不适用于Chrome和Firefox

回答

相关问题