JQuery 플러그인 : 플러그인 옵션 내에서 $ (this)를 사용하는 기능

Question

안녕하세요.

http://docs.jquery.com/Plugins/Authoring에서 찾은 단계에 따라 Jquery 플러그인을 개발하려고하는데 플러그인에 전달 된 옵션 내에서 호출자 개체 ("this"변수)에 도달하는 데 문제가있는 것 같습니다. 버튼에 "깜박임"효과를주기 위해 사용하려는 플러그인입니다.

플러그인의 옵션으로 "표시/숨기기"(또는 링크 깜박임, 깜박임 - 꺼짐, 원하는 경우)로 실행하는 기능을 전달할 수 있기를 원합니다. 사용자가 1000 밀리 초마다 전체 버튼을 숨기거나 표시하여 "깜박임"효과를 얻고 싶다고 가정 해 봅시다.

$("#bttnOk").myBlinker ({ 
    blinkHide: function(){$(this).hide();}, 
    blinkShow: function(){ $(this).show();}, 
    interval:1000 
}); 
// … // 
// And to make it actually blink: 
$("#bttnOk").myBlinker ("blink"); 

또는의 사용자가 및 인라인 CSS의 유구를 200ms마다 적용 아래로 버튼을 이동하기를 원하는 가정 해 봅시다 : 그럼 난 뭔가처럼되고 옵션을하고 싶습니다. 그런 다음 옵션과 같은 것 :

$("#bttnOk").myBlinker ({ 
    blinkHide: function(){$(this).css(“margin-top: 10px”);}, 
    blinkShow: function(){ $(this).css(“margin-top: 0px”);}, 
    interval:200 
}); 

문제는 내가 참조를 잃을 것이다에 "$ (이)"나는 옵션의 내부입니다 때. 플러그인이 blinkHide/blinkShow 함수에 도달하면 "this"은 버튼 $ ("# bttnOk") 내 "myBlinker"플러그인이 연결되지 않은 전체 DOM 윈도우입니다.

이것은 내가 작성하려고하는 첫 번째 Jquery 플러그인이므로, 내가하려는 것을 달성 할 수있는 방법이 있는지 확실하지 않습니다.

(function($){ 
    var defaultOptions = { 
     interval: 500 
    } 

    var methods = { 
     init : function(options) { 
      return this.each(function(){ 
       this.options = {} 
       $.extend(this.options, defaultOptions, options); 
       var $this = $(this); 
       var data = $this.data('myBlinker'); 

       // If the plugin hasn't been initialized yet 
       if (! data) { 
        $this.data('myBlinker', { 
         on : true 
        }); 
       } 
      }); 
     }, 
     destroy : function() { // Some code here}, 
     blink: function (){ 
      console.log("Blinking!. This: " + this); 
      var current = 0; 
      var button=this.get(0); 
      setInterval(function() { 
       if (current == 0){ 
        button.options["blinkShow"].call(this); 
        current=1; 
       } else { 
        button.options["blinkHide"].call(this); 
        current=0; 
       } 
      }, button.options["interval"]); 
     } 

    }; 

    $.fn. myBlinker = function(method) { 
     // Method calling logic 
     if (methods[method]) { 
      return methods[ method ].apply(this, Array.prototype.slice.call(arguments, 1)); 
     } else if (typeof method === 'object' || ! method) { 
      return methods.init.apply(this, arguments); 
     } else { 
      $.error('Method ' + method + ' does not exist on jQuery.myBlinker '); 
      return null; 
     } 
    }; 
})(jQuery); 

어떤 생각, 수정, 링크 또는 팁을 이해할 수있을 것이다 :

내 플러그인 코드는 다음과 같은 구조를 따른다.

감사합니다.

Answer 1

setInterval 함수 내에서 this은 전역 객체이며 깜박임 함수와 같은 현재 요소 DOMElement가 아닙니다. 네 ... 그것은 작동하고

blink: function (){ 

     // save a reference of 'this' 
     var that = this; 

     setInterval(function() { 

      // use the saved reference instead of 'this' 
      button.options["blinkShow"].call(that); 

     }, button.options["interval"]); 
    } 

DEMO