JS异步编程三：Jscex无创痕切入jQUI

很多人可能会有个疑问，Jscex和其他类库共同使用或者语法混用时，会不会出现冲突或者异常？那么我们就来做个尝试吧!

我们使用tab插件：

$(function () {  
$("#tabs").tabs({ event: "mouseover" });  
});  

后来，官网帮这个tab插件扩展了一个自动切换的功能，只需要这样写就行：

$(function ()   
{var t = $("#tabs").tabs();  
t.tabs("rotate", 3000, false);  
}); 

扩展的代码如下：

$.extend($.ui.tabs.prototype, {  
            rotation: null,  
            rotate: function (ms, continuing) {  
                var self = this,  
o = this.options;  
                var rotate = self._rotate || (self._rotate = function (e) {  
                    clearTimeout(self.rotation);  
                    self.rotation = setTimeout(function () {  
                        var t = o.selected;  
                        self.select(++t < self.anchors.length ? t : 0);  
                    }, ms);  
                    if (e) {  
                        e.stopPropagation();  
                    }  
                });  
                var stop = self._unrotate || (self._unrotate = !continuing  
? function (e) {  
    if (e.clientX) { // in case of a true click  
        self.rotate(null);  
    }  
}  
: function (e) {  
    t = o.selected;  
    rotate();  
});  
                // start rotation  
                if (ms) {  
                    this.element.bind("tabsshow", rotate);  
                    this.anchors.bind(o.event + ".tabs", stop);  
                    rotate();  
                    // stop rotation  
                } else {  
                    clearTimeout(self.rotation);  
                    this.element.unbind("tabsshow", rotate);  
                    this.anchors.unbind(o.event + ".tabs", stop);  
                    delete this._rotate;  
                    delete this._unrotate;  
                }  
                return this;  
            }  
        }); 

依然是那么费解的代码！在官方没有扩展之前，我们可以用Jscex介样子实现：

var swicthAsync = eval(Jscex.compile("async", function () {  
            var tabCount = $("#tabs ul li").length;  
            while (true) {  
                for (var i = 0; i < tabCount; i++) {  
                    $await(Jscex.Async.sleep(2000));  
                    $('#tabs').tabs({ selected: i });  
                }  
            }  
        }));  
        $(function () {  
            $("#tabs").tabs();  
            swicthAsync().start();  
        }); 

可以看得出来，这样的话Jscex没有对JqueryUI做任何介入，Jscex只是外部控制的一层壳。这样无法对测试出Jscex是否能与冲突或者异常，那么，我们就来用Jscex重写官方的扩展方法吧！

$.extend($.ui.tabs.prototype, {  
            rotation: null,  
            rotate: function (ms, continuing) {  
                var self = this,  
o = this.options;  
                var swicthAsync = eval(Jscex.compile("async", function () {  
                    while (true) {  
                        for (var i = 0; i < self.anchors.length; i++) {  
                            $await(Jscex.Async.sleep(ms));  
                            self.select(i);  
                        }  
                    }  
                }));  
                swicthAsync().start();  
                return this;  
            }  
        }); 

但是continuing参数暂时没有起作用，该参数是决定用户在选中后是否继续循环下去，这个就留个大家自己去完善吧~~~~

新的Jscex 库，请上https://github.com/JeffreyZhao/jscex或者http://www.sndacode.com/projects/jscex/wiki下载。

原文链接：http://www.cnblogs.com/iamzhanglei/archive/2011/08/21/2148628.html

【编辑推荐】

1. JS异步编程一：用Jscex画圆
2. JS异步编程二：自由落体
3. JS异步编程四：Jscex+jQ打造游戏力度条
4. JS异步编程五：Jscex制作愤怒的小鸟
5. 看JavaScript如何实现页面自适