Question

我有一个jQuery幻灯片插件我正在制作尽管它里面有一个setInterval()但是如果我将setInterval()的内容移到它之外就没有被调用然后它工作了它只运行一次。

var gap = 3;
var duration = 0.5;
(function ($) {
    $.fn.slideshow = function () {
        return this.each(function () {
            g = gap * 1000;
            d = duration * 1000;
            $(this).children().css({
                'position': 'absolute',
                'display': 'none'
            });
            $(this).children().eq(0).css({
                'display': 'block'
            });
            setInterval(function () {
                slide();
            }, g);

            function slide() {
                $(this)
                    .children()
                    .eq(0)
                    .fadeOut(d)
                    .next()
                    .fadeIn()
                    .end()
                    .appendTo($(this).children().eq(0).parent());
            }
        });
    };
})(jQuery);
$('.slideshow').slideshow();

HTML：

<div class='slideshow'>
    <a>1</a>
    <a>2</a>
    <a>3</a>
    <a>4</a>
</div>

这是我的插件的小提琴：

http://jsfiddle.net/Hive7/GrtLC/

Answer 1

this函数中的slider问题并未指向您认为指向的对象。

        setInterval($.proxy(function () {
            slide.call(this);
        }, this), g);

演示：Fiddle

或更好

setInterval($.proxy(slide, this), g);

演示：Fiddle

Answer 2

您的问题是this始终是本地定义的;当您进入setInterval()时，您丢失了原始this（它已重置为window对象。）

有几种方法可以解决这个问题;最简单的可能是将this复制到局部变量中。

http://jsfiddle.net/mblase75/GrtLC/5/

var gap = 3;
var duration = 0.5;
(function ($) {
    $.fn.slideshow = function () {
        return this.each(function () {
            g = gap * 1000;
            d = duration * 1000;
            $this = $(this); // caches the jQuery object as a further optimization
            $this.children().css({
                'position': 'absolute',
                'display': 'none'
            });
            $this.children().eq(0).css({
                'display': 'block'
            });
            setInterval(function () {
                slide($this); // pass $this into the function
            }, g);

            function slide($obj) {
                $obj.children()
                    .eq(0)
                    .fadeOut(d)
                    .next()
                    .fadeIn()
                    .end()
                    .appendTo($obj.children().eq(0).parent());
            }
        });
    };
})(jQuery);
$('.slideshow').slideshow();

Answer 3

您的代码无法正常工作，因为您的回调不受此限制;尝试改为

var that = this;

setInterval(function () {
    slide();
}, g);

function slide() {
    $(that) ....

Answer 4

this函数内的

slide不是幻灯片。我让它在each循环中缓存对象：http://jsfiddle.net/x7Jk8/

setInterval（）里面没有调用插件函数

4 个答案: