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 に答える