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

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

javascript jquery html

Javascript 更改图像src内容时出现问题,javascript,jquery,html,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 waitFunc(  func, time )
{
    var startTime = performance.now();
    var currTime = performance.now();

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

    func();
}

函数waitFunc（func，time） { var startTime=performance.now（）； var currTime=performance.now（）；

while（（当前时间-开始时间）好的，所以我能够利用您提供的信息来实现这一点。从大门开始，看看您拥有什么，什么都没有定义。但是，假设您在最后两个函数中都正确定义了

inputForm

和

pictureImg

，那么您唯一缺少的就是定义

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

函数waitFunc（func，time） { [...]

而（（currTime-startTime）有一个名为

setTimeout（）

的函数，它的功能与您需要的功能完全相同。为什么不使用它而不是重新构建JavaScript呢

另外，并非所有浏览器都支持

performance.now（）；

：

此外，您的功能根本不应该工作：

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

这里您应该有

startTime==currTime

，因为您在不到1毫秒的时间内设置了相同的值

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

while（（currTime-startTime）您必须知道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（func，time）
{
var startTime=performance.now（）；
var currTime=performance.now（）；
虽然（（currTime-startTime）我运行了一些测试，正如我在问题注释中提到的，问题似乎是您使用的waitFunc
在浏览器能够加载图片和更改显示之前冻结了浏览器
我得到了某种工作方式，但您可能不喜欢它：解决方案是使用setTimeout
（毫秒值较低：1-20）调用waitFunc
（所需值减去1-20毫秒）。类似这样：
setTimeout(waitAuxForm, 1);

然后你就有了这个功能：
function waitAuxForm() { waitFunc(showForm, 749); }

我已经把它放在一个jsfiddle和一个jsfiddle中
此解决方案也存在一些问题：

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

我希望有帮助：）
你为什么要用函数waitFunc
而不是setTimeout
？@Alvarontoro他说setTimeout的工作原理与他在文章底部所预期的一样。他可能只是在做编程练习，而不是解决任何实际问题。顺便说一句，你的waitFunc
在执行浏览器时挂起浏览器你将浏览器冻结了3/4秒，在这段时间里你和用户都不能做任何事情。这可能更准确，但却更少efficient@WissamEl-Kik OP的代码与您共享的问题中的解决方案匹配，但对他/她不起作用。我要说，这不是重复代码。永远不要使用带大写字母的文件扩展名。.PNG
sh应该是.png
，原因之一：*某些软件/库/框架等*在读取/加载文件扩展名为大写字母的文件时遇到问题。您应该始终使用小写字母作为文件扩展名。我也不明白您为什么编写（time/1）
。它等于时间
。为什么要创建var i=0；
并稍后在映像路径中使用变量，如果它将等于零？！我同意您的观点，文件扩展名是小写的，（时间/1）
这似乎很愚蠢。大多数代码都是直接从OP复制/粘贴的，我没有费心去修复它，试图保留原始代码的上下文。创建var I=0
将允许if（I<100）
条件，而不是为缺少的i
变量抛出错误。文件名中是否包含i
应该无关紧要，因为这只会使文件名字符串。/images/Slide0.png，这可能是一个有效文件。根据setTimeout不准确。我正在尝试实现此方法：响应很可能出现在您共享的一个链接中：感谢您为我清除线程问题。我的意图是显示我在showPicture函数中设置了750毫秒的图片，因此我不希望在这段时间内使用浏览器。图片仍然是可用的当我使用setTimeout函数时，它没有显示出来。对此有什么想法吗？非常感谢您的努力！我将尝试按照您的建议实现onload触发器，如果我不能成功，我将使用此实现（它将偏差最小化）。太好了。让我知道它是如何进行的。
setTimeout(waitAuxForm, 1);

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