javascript - 插件函数内部的 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/