Question

Tween is not working in Xpages ,I have used the setTimeOut function for delay.
But which is not working as of my concern. alert is working and getting delayed while using setTimeOut function. But changing of style is not working… Actually Last instance of the action is only working

Code that I have used is.

var t = 1;
var flag;

function doMove() {
    alert("Hi");
    t = t + 1;
    if ((t % 2) == 0) {
        document.getElementById("#{id:label1}").style.color = "blue";
        flag = test()
    }
    else {
        document.getElementById("#{id:label1}").style.color = "red";
        flag = test()
    }

}


function test() {
    var startTime = new Date().getTime();
    while (new Date().getTime() < startTime + 1000);
    return true;
}

for (var l = 0; l <= 2; l++) {
    doMove();
}  






XSP :    
Please see the following  
<xp:label value="Testing" id="label1" style="font-weight:bold;font-        size:14pt;color:rgb(255,0,0)">  
</xp:label>    
<xp:button value="Dojo" id="button3">  
    <xp:eventHandler event="onclick" submit="false">  
        <xp:this.script><![CDATA[    


var t = 1;  
var flag;  

function doMove() {  
    alert("Hi");  
    t = t + 1;  
    if ((t % 2) == 0) {  
        document.getElementById("#{id:label1}").style.color = "blue";  
        flag = test()  
    }  
    else {  
        document.getElementById("#{id:label1}").style.color = "red";  
        flag = test()  
    }  

 }  


 function test() {  
    var startTime = new Date().getTime();  
    while (new Date().getTime() < startTime + 1000);  
    return true;  
}  

for (var l = 0; l <= 2; l++) {  
    doMove();  
}      


    ]]></xp:this.script>  
    </xp:eventHandler>  
</xp:button>  

Answer 1

Ok, I understand the problem better now (sorry), but it is because of the for loop. The browser updates the interface after all loops are done. I have spend some time on this and came up with this code. With the max variable you will set the number of times it will blink the text. I hope this will solve the problem.

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" createForm="false">

    <xp:label value="Label" id="label1"></xp:label>


    <xp:eventHandler event="onClientLoad" submit="false">
        <xp:this.script><![CDATA[var t = 1;
var flag;
var max = 5;

function doMove() {   

    t = t + 1;   
    if (t > max){
        return;
    }
    if ((t % 2) == 0) {   
        document.getElementById("#{id:label1}").style.color = "blue";  

       flag = setTimeout(doMove, 1000);  
    }   

    else {   
        document.getElementById("#{id:label1}").style.color = "red"; 

      flag = setTimeout(doMove, 1000); 
    }



}   

doMove(); 

]]></xp:this.script>
    </xp:eventHandler>
</xp:view>