Javascript setTimeout-recursion不适用于Chrome和Firefox

Question

The code below is for sliding a div inside another hidden overflow div (concept for future website). 下面的代码用于在另一个隐藏的溢出div（用于将来的网站的概念）内滑动div。 The text box below the "next" and "previous" links is for indicating the x value. “下一个”和“上一个”链接下方的文本框用于指示x值。 With IE8 everything works just fine. 使用IE8，一切正常。

With Chrome and Firefox it seems to do the function only once (one step) both "next" and "prev", which means setTimeout doesn't run. 对于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>

Can you please assist? 你能帮忙吗？

Answer 1

It might be a better way, in this case, to use setTimeout like the following: 在这种情况下，使用setTimeout可能是一种更好的方法，如下所示：

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

However, the lack of the "window." 但是，缺少“窗口”。 object prefix might be another cause of your functionality not working in these browsers. 对象前缀可能是导致您的功能无法在这些浏览器中运行的另一个原因。

If you have any other questions don't hesitate to ask. 如果您还有其他问题，请随时提出。

As stated in the comments it would save a good deal of time to use jQuery. 如评论中所述，使用jQuery将节省大量时间。

Best regards, 最好的祝福，

Javascript setTimeout-recursion不适用于Chrome和Firefox

问题描述

1 个解决方案

解决方案1
1 已采纳 2012-01-27 20:32:48

Javascript setTimeout-recursion不适用于Chrome和Firefox

问题描述

1 个解决方案

解决方案1 1 已采纳 2012-01-27 20:32:48

解决方案1
1 已采纳 2012-01-27 20:32:48