更改图像src内容的麻烦

时间:2014-10-03 18:19:50

标签: javascript jquery html

我有一个函数应该推迟下一个函数的调用:

function waitFunc(  func, time )
{
    var startTime = performance.now();
    var currTime = performance.now();

    while ( (currTime - startTime) <= (time / 1))
    {
        currTime = performance.now();
    }

    func();
} 

我有另外两个函数应该改变身体中标签的内容:

function showPlus()
{
    //display plus                  
    pictureImg.src = plus;

    //blank only the form that contains input
    inputForm.style.display="none";
    pictureImg.style.display="block";

    //after timeout start "showPicture" function
    waitFunc(showPicture, 250); 
    //setTimeout(showPicture, 250);     
}

function showPicture()
{
    //generate picture pass
    imgName = "../images/Slide"+ i + ".PNG";

    if (i < 100)
    {
        //increase variable i by 1
        ++i;

        //blank only the form that contains input
        inputForm.style.display="none";
        pictureImg.style.display="block";

        //display picture                   
        pictureImg.src = imgName;

        //after timeout start "showForm" function
        waitFunc(showForm, 750);
        //setTimeout(showForm, 750);    
    }
}

在html中:

<img src="../images/Blank.png" id="pictures" name="pictures"/>

目前我正在尝试从showPlus函数调用waitFunc函数,我希望在超时后调用showPicture函数。 问题:当我使用waitFunc函数时,内容不会像它想象的那样改变。但是,当我使用setTimeout函数时,一切都很好。

有些人可以帮助我(我希望这不是一个愚蠢的问题)吗?

P.S。你可以找到页面here

谢谢!


编辑 :您还可以找到jsfiddle here。请注意,小提琴正在使用setTimeout,因此您可以看到它应该如何工作;如果您对setTimeout发表评论并取消评论旁边的waitFunc行,那么您将能够看到问题。

4 个答案:

答案 0 :(得分:1)

有一个名为setTimeout()的函数可以完成您所需的功能。为什么不使用它而不是重新构建JavaScript。

此外,所有浏览器都不支持performance.now();

https://developer.mozilla.org/en-US/docs/Web/API/Performance.now

此外,您的功能根本不起作用:

var startTime = performance.now();
var currTime = performance.now();

这里你应该startTime == currTime因为你在不到1毫秒内设置了相同的值。

while((currTime - startTime) <= (time / 1))

此处(currTime - startTime)应该等于零,(time / 1)等于time

我不明白你要做什么,但如果你想“将一个函数作为参数传递”,你的问题就是重复:Pass a JavaScript function as parameter

答案 1 :(得分:0)

您必须知道javascript在单个线程中被执行。如果运行使用while语句实现的wait函数,则将冻结页面的主线程。

你的waitFunc实现和javascript的setTimeout的区别在于setTimeout函数在一个单独的线程中运行。另一方面,您的功能是同步执行的。例如,showPicture函数在运行时需要75000 ms,因为循环将在每个waiFunc 750 ms上等待。

我希望这有帮助。

此代码非常完美。当页面加载主线程忙3秒时设置3.jpg图像,2秒后图像再次返回第一个图像。这是使用你的函数和settimeout。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="js/lib/jquery-2.1.1.js"></script>
    <script>
           function waitFunc(  func, time )
           {
               var startTime = performance.now();
               var currTime = performance.now();

               while ( (currTime - startTime) <= (time / 1))
               {
                   currTime = performance.now();
               }

               func();
           }

           $(function(){
               waitFunc(function(){

                   $('#dd').prop('src', '3.jpg');

               }, 3000);

               setTimeout(function(){
                   $('#dd').prop('src', 'A_Girl_In_The_Horizon_by_yeg0.jpg');
               }, 2000)
           });
    </script>
</head>
<body>
    <img id='dd' src="A_Girl_In_The_Horizon_by_yeg0.jpg">
</body>
</html>

答案 2 :(得分:0)

我运行了一些测试,正如我在问题评论中提到的,问题似乎是您使用的waitFunc在加载图片并更改显示之前冻结浏览器。

我得到了一些工作,但同样,你可能不喜欢它:解决方案将包括使用setTimeout(具有低毫秒值:1-20)来调用waitFunc(与你想要的值减去1-20毫秒)。像这样:

setTimeout(waitAuxForm, 1);

然后你有了这个功能:

function waitAuxForm() { waitFunc(showForm, 749); }

我把它放在一个jsfiddle和you can see it working here

此解决方案也存在一些问题:

  • 你必须依赖setTimeout一段时间(你可能不喜欢这样)。
  • 加载图片可能需要超过1-20毫秒(您可能需要预加载它们,一旦缓存,它甚至可以使用值1)。

我希望它有所帮助:)

答案 3 :(得分:-1)

好的,所以我能够使用您提供的信息。走出大门,看着你的东西,没有任何定义。但是,假设您在最后两个函数中都正确定义了inputFormpictureImg,那么您唯一缺少的就是定义i

function showPicture()
{
    var i = 0;

    //generate picture pass
    imgName = "../images/Slide"+ i + ".PNG";

    [...]
}

我发现您的waitFunc功能没有任何问题。如果用更简单的函数替换它,它就可以正常工作。

function waitFunc(  func, time )
{
    [...]

    while ( (currTime - startTime) <= (time / 1))
    {
        currTime = performance.now();

        console.log(time); // log so you can see, for testing
    }

    func();
}

waitFunc(function(){console.log("Hello, world!");}, 750); // wait 750 ms, then say "Hello, world!"