Question

我正在为jQuery创建一个插件，我需要在一些动画完成后重新运行相同的函数。我正在尝试使用animate函数中的setTimeout()执行此操作。

我正在努力解决的代码是

jQuery(theslide).animate(theanimation,1000,function() {
        setTimeout('this.makemeslide()',3000)
})

控制台错误消息是 未捕获TypeError：对象[对象窗口]没有方法'makemeslide' ，因为这是指向动画对象。但我不知道如何实现我的目标。

这是我的完整代码

jQuery.fn.daSlider = function(options) {
    //Options
    var settings = $.extend( {
          'selector'         : 'slider',
          'width'      : 940,
          'height'     : 380
        }, options);

    //globals
    var sliderarray = [];
    var slidercount = 0;


    //Contruct
    this.construct = function()
    {
       jQuery('.slider .slide').each(function(){

              jQuery(this).css('display','none');
              sliderarray.push(this) ;

              jQuery(this).children().each(function(){
                    jQuery(this).css('display','none');
                    sliderarray.push(this) ;
                });
       });

      this.makemeslide();
    }
    //run the constuct

    this.makemeslide = function()
    {
      theslide = sliderarray[slidercount];
      slidercount++;

      way_to_slide = jQuery(theslide).attr('slide');

      slide_position =  jQuery(theslide).position();
      //console.log(slide_width);
      //console.log(slide_height);


      if(way_to_slide == 'right')
      {
        jQuery(theslide).css('left', slide_position.left + settings.width);
        theanimation = {'left' : '-='+settings.width};
      }
      if(way_to_slide == 'left')
      {
        jQuery(theslide).css('left', slide_position.left - settings.width);
        theanimation = {'left' : '+='+settings.width};
      }
      if(way_to_slide == 'up')
      {
        jQuery(theslide).css('top', slide_position.top - settings.height);
        theanimation = {'top' : '+='+settings.height};
      }
      if(way_to_slide == 'down')
      {
        jQuery(theslide).css('top', slide_position.top + settings.height);
        theanimation = {'top' : '-='+settings.height};
      }
      if(way_to_slide == 'fade')
      {
        jQuery(theslide).css('opacity', 0);
        theanimation = {'opacity' : 1};
      }

      jQuery(theslide).css('display','block') ;
      jQuery(theslide).animate(theanimation,1000,function(){setTimeout('this.makemeslide()',3000)})

    }
    this.construct();

};

Answer 1

永远不要将setTimeout与代码字符串一起使用eval！此外，您的this reference将不是父函数中的那个。

var plugin = this;
jQuery(theslide).animate(theanimation, 1000, function() {
    // "this" references theslide element
    setTimeout(function() {
        // "this" references the global object (window)
        plugin.makemeslide();
    }, 3000);
});

顺便说一下，您可能希望jQuery's delay method使用回调而不是独立超时。

Answer 2

这是因为 javascript中的此与i Java不同。这个就是这种情况下的窗口对象。

你可以使用闭包来避免这个问题：

function Object(){
    self=this;
    this.inner = function(){


     setTimeout(function(){
        alert(self);
        alert(this);
     },100);
    }
}

var o = new Object();
o.inner();

请注意，第二个警报将显示window-object，而不是o-object

jQuery在animate中运行父函数

2 个答案: