Как динамически менять стиль в Xpage ??? На самом деле, я хочу мигать ярлыком другого цвета?

Question

Tween не работает в Xpages, я использовал функцию setTimeOut для задержки.
Но это не работает с моей заботой. alert работает и получает задержку при использовании функции setTimeOut. Но изменение стиля не работает ... Фактически Последний экземпляр действия работает только

Код, который я использовал, является.

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

Хорошо, я понимаю проблему лучше (извините), но из-за цикл. Браузер обновляет интерфейс после завершения всех циклов. Я потратил некоторое время на это и придумал этот код. С максимальной переменной вы будете устанавливать количество раз, когда оно будет мигать над текстом. Надеюсь, это решит проблему.

<?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> 

Answer 2

Может быть, вместо того, чтобы попытаться использовать Dojo:

dojo.style("#{id:label1}", "color", "blue"); 

и

dojo.style("#{id:label1}", "color", "red"); 

Answer 3

Ваш код работает нормально, поэтому он должен быть какой-то другой код, который ломает сценарий. Я добавил это на новую страницу Xpage, и она мигает красным и синим!

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

    <xp:label value="Label" id="label1"></xp:label> 
    <xp:eventHandler event="onClientLoad" 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:view> 

Answer 4

Работает без предупреждения. Причина, по которой ваш скрипт не работает, потому что цикл ожидания блокирует пользовательский интерфейс, пока он не будет выполнен. Похоже, он ничего не сделал, но так и было. Вы можете протестировать его самостоятельно, добавив новые элементы на свою страницу html. После скрипта вы увидите несколько элементов, добавленных при обновлении пользовательского интерфейса.

Вы действительно должны использовать функцию SetTimeout для этого работы:

<?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; 

function doMove() { 

    t = t + 1; 
    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); 
    } 

} 


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


} 


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