$.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,width: 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;}

?

轉載于:https://www.cnblogs.com/fastmover/p/4121473.html

總結

以上是生活随笔為你收集整理的简单的jQuery扩展函数-让函数缓冲执行的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。