開始停止jquery插件

Question

我wahnt寫一個jQuery插件，將改變x背景位置在一個循環的時間間隔。 $('#element').pluginName(); - 啓動環形行動

然後我wahnt通過$('#element').stopFunction();或$('#element').pluginName().stopFunction();

是否有可能阻止它？你可以給我一個小費如何寫它？

編輯（我的解決方案）：

var LoadingAjax = function(element, options){ 
    var element = $(element); 
    var object = this; 
    var defaults = { 
      width: 30, 
      gap : 1, 
      interval : 100, 
      maxFrame: 8 
    }; 
    var settings = $.extend(defaults, options || {}); 
    var timer; 
    var frame = 1; 
    var is_loading; 

    // Public method 
    this.startAnimate = function(){ 
     console.log('start animate'); 
     is_loading = true; 
     timer = setTimeout(loop, settings.interval); 
    }; 
    this.stopAnimate = function(){ 
     console.log('stop animate'); 
     is_loading = false; 
     clearTimeout(timer); 
    }; 
    this.isLoading = function(){ 
     return is_loading; 
    } 
    // Private method 
    var loop = function(){ 
     console.log('frame: '+frame); 
     if(frame < defaults.maxFrame){ 
      element.css('background-position', '-'+(frame*(defaults.width+defaults.gap))+'px 0'); 
      frame++; 
     } 
     else{ 
      element.css('background-position', '0 0'); 
      frame = 1; 
     } 
     timer = setTimeout(loop, settings.interval); 
    }; 
}; 
$.fn.loadingAjax = function(options){ 
    return this.each(function(){ 
     var element = $(this); 
     // Return early if this element already has a plugin instance 
     if (element.data('loader')) return; 

     // pass options to plugin constructor 
     var plugin_instance = new LoadingAjax(this, {}); 

     // Store plugin object in this element's data 
     element.data('loader', plugin_instance); 
    }); 
}; 

$(document).ready(function(){ 
    $('a#start').click(function(){ 
     var loadingElement = $('.loading.ajax'); 
     loadingElement.loadingAjax(); 
     var plugin_instance = loadingElement.data('loader'); 
     if(plugin_instance.isLoading() === true){ 
      plugin_instance.stopAnimate(); 
     } 
     else{ 
      plugin_instance.startAnimate(); 
     } 
    }); 
}); 

這個環節是非常有益的：http://www.virgentech.com/blog/2009/10/building-object-oriented-jquery-plugin.html

Answer 1

$.fn.pluginName = function(){ 
    return this.each(function(){ 
     //Something cool and fancy happens here. 

     //Remember you can have access to the element using the variable 'this'. 
    } 
} 

會讓你的插件可供調用$('#element').pluginName()

現在，大約間隔，可以使這樣的：

var holder = setInterval(function(){ 
    //The code here repeats every half a second. 
}, 500); 

然後用此清洗：

clearInterval(holder); 

唯一的問題是你必須對範圍非常謹慎。製作holder一個全局變量應該可以做到這一點，但我建議你通過閱讀this before，藉此機會學習一些性感的jutsus。

Answer 2

，你可以通過閱讀jQuery Authoring啓動。

Answer 3

當然，這是可能的，你可以做一些事情，比如使用setInterval並將結果存儲在元素的.data中......如果你問這個問題，但你應該多花點時間學習基本知識js和jquery在處理該項目之前。