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

回答

相關問題