Question

代码第一次工作，递归调用有效，但图像不会更新。注意：.src不会改变 - 它只是在相机中每秒更新一次，所以如果我刷新页面它更新但不通过递归函数调用 - 我需要做些什么才能让它更新？谢谢！

<!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>
        <title>Test Image update from cam</title>
        <script type="text/javascript">
            var t;
            function updateimg() {
                document.getElementById('camimg').src = "urlofimgfromcamera - this is valid url";
                t = setTimeout('updateimg()', 2000);
            }
        </script>
    </head>
    <body>
    <img id="camimg" src="" width="1400" alt=""/>
         <script type="text/javascript">
            t = setTimeout('updateimg()', 2000);
         </script>
    </body>
</html>

Answer 1

图片未更新，因为它是由您的浏览器缓存的，并且您使用的是相同的网址。尝试向图像URL添加日期，您应该使用setInterval而不是递归调用：

var timer = setInterval(function(){

    var imgUrl = "image.png?v=" + new Date().getTime();
    document.getElementById('camimg').src = imgUrl

},5000);

Answer 2

正如@adeneo指出的那样，不要将字符串传递给setTimeout函数，你甚至可以删除括号。

<!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>
        <title>Test Image update from cam</title>
        <script type="text/javascript">
            var t;
            function updateimg() {
                document.getElementById('camimg').src = "urlofimgfromcamera - this is valid url";
                t = setTimeout(updateimg, 2000);
            }
        </script>
    </head>
    <body>
    <img id="camimg" src="" width="1400" alt=""/>
         <script type="text/javascript">
            t = setTimeout(updateimg, 2000);
         </script>
    </body>
</html>

javascript html update img src - 这有什么问题？

2 个答案: