Question

我正在为我的网站编写一个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);

Answer 1

嗯，根据我的理解，我没有看到任何代码行来阻止以前应用的插件设置的前一个定时器，所以我相信它们都堆积起来，你在不同的时间间隔内拥有的更多，它们得到的速度越快

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

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

计时器变得更快更快

1 个答案: