0

我正在为我的网站编写一个 jquery 插件，这是一个片段：

(function($){
    var options;
    var fqTimer;
    var counter = 1;

    $.fn.jsSlideShow = function(settings){
        options = $.extend({
            frequency: 3000,
            speed: "slow",
            images: [],
            position: "center center"
        }, settings);
        addImages();
        doFade();
        return this;
    };
    function doFade(){
        fqTimer = setTimeout(function(){
            fade();
        }, options.frequency);
    }
    // other functions
});

它有效，但我遇到了问题。我在 jquery 的 ajax 成功回调中有这段代码：

$("#player").jsSlideShow({
    images: imgs
});

但是会发生什么，现在我的doFade()函数被调用得更快，每次调用我的 ajax 成功doFade()都会变得更快。有没有办法阻止这种情况发生？

这是我的ajax调用：

success: function(data){
    var player = $("<div>").attr("id", "player").addClass("jsSlideShow");
    $("#page").html(player);
    var imgs = new Array();
    for(i in data){
        file = data[i]["filename"] + ".jpg";
        imgs.push("/media/gallery/" + file);
    }

    $("#player").jsSlideShow({
        images: imgs
    });
}

编辑：新工作副本

这是完整的插件：

(function($){

    $.fn.jsSlideShow = function(settings){
        var options;
        var fqTimer = null;
        clearTimeout(fqTimer);
        var counter = 1;
        var jsSlider = $(this);
        options = $.extend({
            frequency: 3000,
            speed: "slow",
            images: [],
            position: "center center"
        }, settings);
        addImages();
        doFade();

        function addImages(){
            var hide = false;
            jsSlider.html("");
            for(i in options.images){
                var div = $("<div>").attr("id", "jsSlideShow-" + i).addClass("jsSlideShow-img-block").css({
                    width: "100%",
                    height: "100%",
                    backgroundImage: "url('" + options.images[i] + "')",
                    backgroundPosition: options.position,
                    backgroundRepeat: "no-repeat",
                    position: "absolute"
                });
                if(hide){
                    div.css({display: "none"});
                }
                hide = true;
                jsSlider.append(div);
            }
        }

        function doFade(){
            fqTimer = setTimeout(function(){
                fade();
            }, options.frequency);
        }

        function fade(){
            current = jsSlider.children("div.jsSlideShow-img-block:nth-child(" + counter + ")");
            current.fadeOut(options.speed);
            counter++;
            if(counter === options.images.length + 1){
                counter = 1;
            }
            current = jsSlider.children("div.jsSlideShow-img-block:nth-child(" + counter + ")");
            current.fadeIn(options.speed, function(){
                doFade();
            });
        }


        return this;
    };
})(jQuery);
4

1 回答 1

0

好吧，据我了解，我没有看到任何代码行来停止由以前应用的插件设置的以前的计时器，所以我相信它们都会堆积起来，而且你在不同的时间间隔拥有的越多，它们就会越快。

现在，您应该做的是检测插件是否先前应用于该元素，如果是，则清除先前设置的超时。

但是，您设计插件的方式，options以及其他变量是共享的，因此每次您将插件应用于不同元素时，它们都会被替换。你也必须改变它......

于 2013-08-03T22:34:27.013 回答