WebUI无阻塞更新的实现

在网页设计过程中，我们可能会需要一些特效来丰富显示效果，要么平滑滚动，要么颜色渐变等等，这些利用JQuery可以很方便的完成，但是今天我要介绍的是利用原始的setTimeout方法并结合递归来实现，效果还是很不错的，下面先看展示：

效果展示

 

(==================这里是图1===================)

(=====================这里是图2=================)

图1是开始运行的时候，图2是运行完成之后。

下面来说下我的设计思路：

首先，既然要实现平滑的效果，我们需要一直调用某个函数，并且在这个函数内部，状态值能够不停地改变，这让我想起了递归，所以，在上图的三个实例中，均采用了递归来实现，现在列举其中一个：

 function changePrograssbarIncremental(i) {
            $("#myPro").css("width", i);
            $("#myPro").text(Math.floor(i / 2) + "%");
            if (i < 200) {
                tPrograss = setTimeout('changePrograssbarIncremental(' + (i + 1) + ')', 50);
                
            }
        }

 

这样，当程序进来的时候，setTimeout会依据当前的条件，每隔50ms就会调用changePrograssbarIncremental函数一次，直到i值为200的时候停止，这样就实现了HTML控件状态的不断改变，然后只需要简单的申明一个函数来调用即可：

        //动态更新prograssbar的值////////////////////////
        var tPrograss;
        function changePrograssbar() {
            clearTimeout(tPrograss);  //防止多个instance一起运行,造成重影效果
            changePrograssbarIncremental(0);
        }

 

源码下载

点击这里下载。

附上参考文章：Not blocking the UI in tight JavaScript loops