插件函数内部的setInterval（）未被调用

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);

演示： 小提琴

或更好

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

演示： 小提琴

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

您的代码无法正常工作，因为您的回调未绑定到this； 试一试

var that = this;

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

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

Answer 4

this内部slide功能不是幻灯片。 我让它可以在each循环中缓存对象： http : //jsfiddle.net/x7Jk8/