Question

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

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行，那么您将能够看到问题。

Answer 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

Answer 2

您必须知道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>

Answer 3

我运行了一些测试，正如我在问题评论中提到的，问题似乎是您使用的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）。

我希望它有所帮助：）

Answer 4

好的，所以我能够使用您提供的信息。走出大门，看着你的东西，没有任何定义。但是，假设您在最后两个函数中都正确定义了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!"

更改图像src内容的麻烦

4 个答案: