2012-06-02 33 views
2

我正在使用MooTools 1.4.5,我想在調用需要一些時間的函數之前更改光標,並且在完成相同的函數之後,將光標設置爲默認值。我沒有成功。更改鏈中的css屬性 - JavaScript

之後,我做了一個簡單的例子,通過普通的JavaScript(沒有jQuery或MooTools插件)改變背景顏色,並且我沒有成功。

這是我的代碼。

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div> 

    </div> 
    </form> 
</body> 
    <script type="text/javascript"> 
    <!-- 
     document.body.style.background = 'red'; 
     setTimeout(function() { }, 1250); 
     document.body.style.background = 'yellow'; 
    //-->  
    </script> 
</html> 

首先,我將背景顏色設置爲紅色,延遲後變爲黃色。我認爲背景顏色將會變成紅色,延遲變爲黃色。它不起作用。加載頁面時,背景顏色爲黃色(最後一行)。如果我在設置背景顏色一切正常的行的中間插入警報功能(背景顏色爲紅色,單擊到消息框,背景顏色爲黃色)。 爲什麼它的工作原理如此?只有最後變化的風格受到影響。我需要類似的東西來改變指針,然後調用需要10秒的函數,並在函數完成後將光標設置爲默認值。

+0

'setTimeout()'不會暫停執行,但只會延遲函數內部的代碼。 – Savageman

回答

2

setTimeout並不意味着「等待」。它會在稍後調用您提供的功能。執行流程立即繼續:

document.body.style.background = 'red'; 
setTimeout(function() { 
    document.body.style.background = 'yellow'; 
}, 1250); 

因此,這個工程太:

setTimeout(function() { 
    document.body.style.background = 'yellow'; 
}, 1250); 
document.body.style.background = 'red'; 

對於光標的情況下,只需用.cursor = 'wait'.background = 'yellow'.cursor = 'default'取代.background = 'red'

document.body.style.cursor = 'wait'; 
setTimeout(function() { 
    doSomethingExpensive(); 
    document.body.style.cursor = 'default'; 
}, 10); 
1

setTimeout()第一個參數是一個回調函數,這將延遲後調用,你應該使用這種代碼:

document.body.style.background = 'red'; 
 
document.body.style.cursor = 'wait'; 
 
setTimeout(function(){ 
 
    document.body.style.background = 'yellow'; 
 
    document.body.style.cursor = 'default'; 
 
}, 1250);
body { 
 
    width: 100%; 
 
    height: 100%; 
 
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit. Lorem ipsum.

查看更多有關的setTimeout here

+0

它的工作原理!但如何更改光標? 僞代碼: this.setCursor(「wait」); function(){// something}; this.setCursotr(「default」); 函數的執行需要10秒鐘。 – SilverDeveloper

+0

對於遊標,使用'document.body.style.cursor ='等待';' – zessx

+0

我嘗試設置等待,但總是最後的順序受到影響。始終是默認的althoug功能需要10秒鐘。 – SilverDeveloper