圖片源改變完成

我需要改變所述圖像源onClick，對於我創建jquery的點擊和圖像源不影響直到點擊完成圖片源改變完成

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<style> 
.bg { 
    background-image: url("paper.gif"); 
    background-color: #cccccc; 
} 
</style> 

<script> 
$(document).ready(function(){ 
    $("a").click(function(){ 
     //alert($("#img").attr("src")); 
     $("#img").attr("src","https://www.w3schools.com/images/driveicon.png"); 
     //alert($("#img").attr("src")); 
     $("h1").attr("class",""); 
     //alert('hi'); 
     sleep(10000000); 
     //alert('hi1'); 
    }); 
}); 
function sleep(milliseconds) { 
    var start = new Date().getTime(); 
    for (var i = 0; i < 1e7; i++) { 
    if ((new Date().getTime() - start) > milliseconds){ 
     break; 
    } 
    } 
} 
</script> 
</head> 
<body> 
<h1 class="bg">Hello World!</h1> 
<a> 
<img id="img" src="https://tpc.googlesyndication.com/daca_images/simgad/16193915113295470335?w=195&h=102"/> 
</a> 
<br> 
<p id="img1"/> 
</body> 
</html>

在上述代碼，圖片src在點擊幾秒後發生變化。

我需要在點擊後立即更改圖像源。

在此先感謝

來源

2017-09-23 Srikanth

你爲什麼要鎖的線程，當有人點擊的東西' – adeneo

爲什麼確實..... –

您的問題是，因爲JavaScript是單線程的。因此，當您的sleep()函數中的大量循環運行時，其他任何事情都不會發生。反過來，這意味着DOM沒有時間呈現您對img元素的src所做的更改，並且只有在循環終止時纔會出現。

解決這個問題的方法是使用JS提供的定時器函數之一。你的情況setTimeout()將是最合適的：

$(document).ready(function() { 
 
    $("a").click(function() { 
 
    $("#img").attr("src", "https://www.w3schools.com/images/driveicon.png"); 
 
    $("h1").attr("class", ""); 
 
    setTimeout(doSomethingElse, 1000); 
 
    }); 
 
}); 
 

 
function doSomethingElse() { 
 
    console.log('Doing something else here...'); 
 
}

.bg { 
 
    background-image: url("paper.gif"); 
 
    background-color: #cccccc; 
 
} 
 

 
#img { 
 
    width: 100px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h1 class="bg">Hello World!</h1> 
 
<a> 
 
    <img id="img" src="http://i.imgur.com/HazyBBo.jpg" /> 
 
</a><br /> 
 
<p id="img1" />

來源

2017-09-23 10:23:01

圖片源改變完成

回答

相關問題