更改图像src内容时出现问题

Trouble with changing image src content

本文关键字：问题 图像 src      更新时间：2023-09-26

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

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函数时，一切都很好。

有人能帮我吗（我希望这不是一个愚蠢的问题）？

附言：你可以在这里找到这一页。

谢谢！

编辑：您也可以在此处找到jsfiddle。请注意，fiddle正在使用setTimeout，这样您就可以看到它应该如何工作；如果您对setTimeout进行注释，并取消对其旁边的waitFunc行的注释，那么您将能够看到问题。

有一个名为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。

我不明白你想做什么，但如果你想"将函数作为参数传递"，你的问题是重复的：将JavaScript函数作为参数

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

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

我希望这能有所帮助。

这个代码运行得很好。当页面加载时，主线程忙碌3秒，设置3.jpg图像，2秒后，图像再次返回为第一个图像。这是在使用你的功能和设置。

<!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>

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

我得到了一些工作，但同样，你可能不喜欢它：解决方案将使用setTimeout（具有低毫秒值：1-20）来调用waitFunc（具有你想要的值减去1-20毫秒）。类似这样的东西：

setTimeout(waitAuxForm, 1);

然后你就有了功能：

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

我把它放在一个jsfiddle中，你可以看到它在这里工作。

这个解决方案也带来了一些问题：

  • 您必须在较短的时间内依赖setTimeout（您可能不喜欢这样）
  • 您可能需要1-20毫秒以上的时间来加载图片（您可能需要预加载它们，一旦缓存，即使值为1也可以工作）

我希望它能有所帮助：）

好的，所以我能够使用您提供的信息来处理这个问题。走出大门，看着你所拥有的，什么都没有定义。但是，假设在最后两个函数中都正确定义了inputForm和pictureImg，那么您唯一缺少的就是定义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!"
相关文章：