Question

JavaScript部分：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
        $('document').ready(function(){
            setTimeout('slideback()', 1000);
            function slideback()
            {
                $('body').css('background-image','url(http://sehirmedya.com/wp-content/uploads/2012/12/uluda%C4%9F.jpg)');
            }
        });
</script>

CSS代码：

body{
                background-image:url('taksi.jpg');
                background-size:100%; 
                background-attachment:fixed;
                -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
                src='taksi.jpg',
                sizingMethod='scale')";
                filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
                src='taksi.jpg',
                sizingMethod='scale');
            }

1000毫秒后，它应该改变但不会改变。为什么不？我该如何解决这个问题？

Answer 1

slideback的范围在DOM就绪处理程序范围内。通过将字符串传递给setTimeout，您将调用它的全局eval。而是将该函数作为参考传递：

 $('document').ready(function() {
      setTimeout(slideback, 1000);
      function slideback() {
          $('body').css('background-image','url(http://sehirmedya.com/wp-content/uploads/2012/12/uluda%C4%9F.jpg)');
      }
 });

Answer 2

当您使用'slideback()'作为setTimeout()的字符串文字时，它会在 $(document).ready()函数之后运行该代码，此时您的函数定义为no从外面可以更长时间访问。

使用这样的匿名函数可以避免许多范围问题：

setTimeout(function() { $('body').css('background-image','url(http://sehirmedya.com/wp-content/uploads/2012/12/uluda%C4%9F.jpg)'); }, 1000);

或者，通过传递函数 reference 而不是名称：

setTimeout(slideback, 1000);

您也可以将定义移到.ready()函数之外：

function slideback() { $('body').css('background-image','url(http://sehirmedya.com/wp-content/uploads/2012/12/uluda%C4%9F.jpg)'); } $(function() { setTimeout(slideback, 1000); });

Answer 3

由于将字符串传递给超时时遇到的范围问题，匿名函数效果更好：

DEMO

   $('document').ready(function(){
        setTimeout(function() {
            $('body').css('background-image','url(http://sehirmedya.com/wp-content/uploads/2012/12/uluda%C4%9F.jpg)');
        },1000);
    });

Answer 4

问题在于编写代码没问题。

<script type="text/javascript" src="js/jquery.js"></script>

<script>
    function slideback()
    {
        $('body').css('background-image','url(http://sehirmedya.com/wp-content/uploads/2012/12/uluda%C4%9F.jpg)');
    }
    $('document').ready(function(){
        setTimeout(slideback, 1000);
    });
</script>

<body></body>

为什么背景图像不会改变？

4 个答案: