js执行和页面渲染的问题

Question

我想用js写一个闪烁效果
思路是在一个方法里面循环几次，每次循环改变dom的一些属性，然后写了个死循环（第二层循环）拖时间，再进行下一个循环（第一层循环）
核心代码如下：
// 单线程暂停time毫秒
function wait(time) {
var currentTime = new Date().getTime();
do {
} while (new Date().getTime() - currentTime < time)
}
// 单个方块闪烁（无延迟）
function alertSingle(x, y) {
if (getGird(x, y).attr("class").indexOf("gird alert") > -1) {
getGird(x, y).attr("class", "gird on");
} else {
getGird(x, y).attr("class", "gird alert");
}
}
// 一些方块闪烁（有延迟）
function alertAll(array, frequency, times) {
for (var i = 0; i < times; i++) {
for (var j = 0; j < array.length; j++) {
alertSingle(array[j][0], array[j][1]);
}
wait(frequency);
}
}
然后我发现浏览器会在这些代码执行完毕之后再进行页面的渲染，也就是说这个方法是无效的。
有什么办法可以写出一个闪烁效果（或者任何通过改变dom结构/属性来达成的效果），使得在执行这个效果的中途页面正常渲染，而此时无法执行其他任何js代码（即这个代码是全局同步的，我个人不知道怎么实现，用死循环实现的）？
反正用setTimeout之类的方法是可以实现页面正常渲染，但是这个方法本身并不是同步的，调用这个方法之后瞬间就会继续执行往下的代码，我不希望这样
谢谢大家

Answer 1

不能用同步。那会让浏览器假死，期间无法渲染页面。要用setTimeout()加回调函数来做。把要在后续执行的代码放到回调函数中，在用setTimeout()进行完闪烁效果之后再执行这个回调函数

Answer 2

这样的话调用setTimeout之后就会立即执行之后的代码，我想要的不是这种效果。。
我能想到的解决方案就是自行编写一个全局的setInterval方法（使用很小的time gap），然后在其中就能自己控制每个代码的执行顺序了。而且每次一个代码段执行完毕之后都会退出出setInterval绑定的方法，这样一来每次执行setInterval绑定的方法之后页面都会重新渲染一次。
伪代码如下：
setInterval(function(){
switch(当前的操作类型){
case '操作类型A':
// 执行闪烁操作
break;
case '操作类型B':
// 执行其他操作
break;
}
},5);
这样我控制一个变量就能决定接下来处理什么代码，可以接近“全局同步”这样的感觉。
这样是否可行？

Answer 3

另，使用一个全局的setInterval方法控制所有代码还有个好处就是我可以在里面判断当前的时间戳，判断两个时间戳的差来执行相应代码，由此可以做到不影响页面渲染的sleep/wait一样的效果。
至少功能上应该是可行的，就是不知道会不会影响性能？

Answer 4

这样的话调用setTimeout之后就会立即执行之后的代码，我想要的不是这种效果。。
我能想到的解决方案就是自行编写一个全局的setInterval方法（使用很小的time gap），然后在其中就能自己控制每个代码的执行顺序了。而且每次一个代码段执行完毕之后都会退出出setInterval绑定的方法，这样一来每次执行setInterval绑定的方法之后页面都会重新渲染一次。
伪代码如下：
setInterval(function(){
switch(当前的操作类型){
case '操作类型A':
// 执行闪烁操作
break;
case '操作类型B':
// 执行其他操作
break;
}
},5);
这样我控制一个变量就能决定接下来处理什么代码，可以接近“全局同步”这样的感觉。
这样是否可行？方法可行，但不如用回调函数方便

Answer 5

//回调函数伪代码如下：
function flash(callback) {
function p() {
//闪烁操作
if (操作完成) {
callback();
} else {
setTimeout(p, 100);
}
}
p();
}flash(function(){
//后续执行的代码
});