简单的jQuery扩展函数-让函数缓冲执行

$.fn.retarder = function(delay, method) {
    var node = this;
    if (node.length) {
        if (node[0]._timer_) clearTimeout(node[0]._timer_);
        node[0]._timer_ = setTimeout(function() {
            method(node);
        },
        delay);
    }
    return this;
};

原理就是用了setTimeout这函数， 使用方法

            $(div).retarder(150,
            function(i) {
                box.css({
                    height: box[0].hei - 50,
                     box[0].wid,
                    overflow: 'hidden'
                });
                i.css(animate.from).stop(true, true).animate(animate.to, {
                    duration: 200,
                    complete: function() {
                        if (!$.browser.msie) div.css('opacity', 1);
                        box.css('display', 'none')
                    }
                })
            })

使用实例基于缓冲器做成的图片轮播渐显插件如下：

HTML

                <div>
                    <img src="/images/1.png" />
                </div>
                <div>
                    <img src="/images/2.png" />
                </div>
                <div>
                    <img src="/images/3.png" />
                </div>
                <div>
                    <img src="/images/4.png" />
                </div>
                <div>
                    <img src="/images/5.png" />
                </div>
            </div>

jQuery

        $.fn.initSlideshow = function () {
            var self = $(this);
            self.find("div").each(function (n) {
                var This = $(this);
                This.retarder(n * 2000, function (node) {
                    node.fadeIn(1000, function () {
                        if (n == self.find("div").length - 1) {
                            /*self.find("div").fadeOut(1000).retarder(2000, function (node) {
                                node.fadeIn(1000);
                            });*/
                            self.find("div").retarder(5000, function (node) {
                                node.fadeOut(1000);
                            });
                            self.retarder(7000, function (node) {
                                node.initSlideshow();
                            });
                        }
                    });
                });
            });
        };

 CSS

        #slideshow {
            width: 1040px;
            height: 345px;
            padding-left: 10px;
        }

            #slideshow div {
                float: left;
                height: 345px;
                line-height: 345px;
                display: none;
            }