模块内部简单的函数调用，拿到NaN，呵呵？

Question

这里是我工作的模块：

var FeatureRotator = (function($,global) { 
    var self = {}, 
     currentFeature = 0, 
     images = [], 
     imagePrefix = "/public/images/features/", 
     timer = null,   
     totalImages = 0, 
     initialFeature, 
     interval, 
     blendSpeed, 
     element = null, 
     img1 = null, 
     img2 = null; 

    function setVisibleImage(iid) { 
     $("#img1").attr('src',images[iid].src).css('opacity',1); 
     $("#img2").css('opacity',0); 
     $(".active").removeClass("active"); 
     $("#f"+iid).addClass("active"); 
    } 

    function setCurrentImage(id) { 
     currentFeature = id; 
     setVisibleImage(id); 
    } 

    function doHoverIn(position) { 
     if (currentFeature === position) { 
      self.pause(); 
     } else { 
      setCurrentImage(global.parseInt(position, 10)); 
      self.pause(); 
     } 
    } 

    function doHoverOut(position) { 
     self.unpause(); 
    } 

    self.init = function(options,callback) { 
     var i = 0, 
      tempImg = null; 

     interval = options.interval || 5000; 
     blendSpeed = options.blendSpeed || 500; 
     element = options.element; 
     initialFeature = options.initialFeature || 0; 
     img1 = $("<img/>").attr('id','img1'); 
     img2 = $("<img/>").attr('id','img2').css('opacity','0').css('margin-top',-options.height); 

     $(element).append(img1).append(img2); 

     totalImages = $(".feature").size(); 

     for (i = 0;i < totalImages; i++) { 
      tempImg = new global.Image(); 
      tempImg.src = imagePrefix +"feature_" + i + ".png"; 
      images.push(tempImg); 


      $("#f"+i).css('background-image', 
          'url("'+imagePrefix+"feature_"+i+"_thumb.png"+'")') 
        .hover(doHoverIn($(this).attr('position')) 
        , doHoverOut($(this).attr('position')) 
        ).attr('position',i); 
     } 

     setVisibleImage(initialFeature); 

     if (options.autoStart) { 
      self.start(); 
     } 
     if (callback !== null) { 
      callback(); 
     } 
    }; 

    function updateImage() {   
     var active = $("#img1").css('opacity') === 1 ? "#img1" : "#img2"; 
     var nextFeature = (currentFeature === totalImages-1 ? 0 : currentFeature+1); 

     if (active === "#img1") { 
      $("#img2").attr('src',images[nextFeature].src);    
      $("#img2").fadeTo(blendSpeed, 1);    
      $("#img1").fadeTo(blendSpeed, 0); 
     } else { 
      $("#img1").attr('src',images[nextFeature].src);    
      $("#img1").fadeTo(blendSpeed, 1);    
      $("#img2").fadeTo(blendSpeed, 0); 
     } 

     $("#f"+currentFeature).removeClass("active"); 
     $("#f"+nextFeature).addClass("active"); 

     currentFeature = nextFeature; 
    } 



    self.start = function() { 
     currentFeature = initialFeature; 
     setVisibleImage(currentFeature); 
     timer = global.setInterval(function(){ 
      updateImage(); 
     }, interval); 
    };   

    self.pause = function() { 
     global.clearTimeout(timer); 
    }; 

    self.unpause = function() { 
     timer = global.setInterval(function(){ 
      updateImage(); 
     }, interval); 
    }; 


    return self; 
}(this.jQuery, this)); 

这里是它是如何在页面上使用：

<script type="text/javascript"> 
     // ... 

     $(function() { 
      FeatureRotator.init({ 
       interval:5000, 
       element:'#intro', 
       autoStart:true, 
       height:177, 
       blendSpeed:1000, 
       initialFeature:0 
      }); 
     }); 
    </script> 

的问题是，当setVisibleImage从init方法调用， iid的价值是NaN。当调用setVisibleImage函数时，我已经遍历调试器并验证'initialFeature'为0，但是，值不会使它在那里。

任何人都可以帮助我确定问题是什么？我通过JSLint运行了代码，并且它恢复了干净。

UPDATE

确定这里是我更新的代码，现在该功能除了衰落不工作，像正好翻转到下一个，平稳了不褪色：

var FeatureRotator = (function($,global) { 
    var self = {}, 
     currentFeature = 0, 
     images = [], 
     imagePrefix = "/public/images/features/", 
     timer = null,   
     totalImages = 0, 
     initialFeature = 0, 
     interval, 
     blendSpeed; 


    function setVisibleImage(iid) { 
     $("#img1").attr('src',images[iid].src).css('opacity',1); 
     $("#img2").css('opacity',0); 
     $(".active").removeClass("active"); 
     $("#f"+iid).addClass("active"); 
    } 

    function setCurrentImage(id) { 
     currentFeature = id; 
     setVisibleImage(id); 
    } 

    function doHoverIn(obj) { 
     var position = global.parseInt(obj.target.attributes["position"].value,10); 

     if (currentFeature === position) { 
      self.pause(); 
     } else { 
      setCurrentImage(global.parseInt(position, 10)); 
      self.pause(); 
     } 
    } 

    function doHoverOut() { 
     self.unpause(); 
    } 

    self.init = function(options,callback) { 
     var i = 0, 
      tempImg = null, 
      element = null, 
      img1 = null, 
      img2 = null; 

     interval = options.interval || 5000; 
     blendSpeed = options.blendSpeed || 500; 
     element = options.element; 
     initialFeature = options.initialFeature || 0; 
     img1 = $("<img/>").attr('id','img1'); 
     img2 = $("<img/>").attr('id','img2').css('opacity','0').css('margin-top',-options.height); 

     $(element).append(img1).append(img2); 

     totalImages = $(".feature").size(); 

     for (i = 0;i < totalImages; i++) { 
      tempImg = new global.Image(); 
      tempImg.src = imagePrefix +"feature_" + i + ".png"; 
      images.push(tempImg); 


      $("#f"+i).css('background-image','url("'+imagePrefix+"feature_"+i+"_thumb.png"+'")') 
        .hover(doHoverIn, doHoverOut) 
        .attr('position',i); 
     } 

     setVisibleImage(initialFeature); 

     if (options.autoStart) { 
      self.start(); 
     } 
     if (typeof callback === "function") { 
      callback(); 
     } 
    }; 

    function updateImage() {   
     var active = $("#img1").css('opacity') === 1 ? "#img1" : "#img2"; 
     var nextFeature = (currentFeature === totalImages-1 ? 0 : currentFeature+1); 

     if (active === "#img1") { 
      $("#img2").attr('src',images[nextFeature].src);    
      $("#img2").fadeTo(blendSpeed, 1);    
      $("#img1").fadeTo(blendSpeed, 0); 
     } else { 
      $("#img1").attr('src',images[nextFeature].src);    
      $("#img1").fadeTo(blendSpeed, 1);    
      $("#img2").fadeTo(blendSpeed, 0); 
     } 

     $("#f"+currentFeature).removeClass("active"); 
     $("#f"+nextFeature).addClass("active"); 

     currentFeature = nextFeature; 
    } 



    self.start = function() { 
     currentFeature = initialFeature; 
     setVisibleImage(currentFeature); 
     timer = global.setInterval(function(){ 
      updateImage(); 
     }, interval); 
    }; 

    self.stop = function() { 
     global.clearTimeout(timer); 
    }; 

    self.pause = function() { 
     global.clearTimeout(timer); 
    }; 

    self.unpause = function() { 
     timer = global.setInterval(function(){ 
      updateImage(); 
     }, interval); 
    }; 


    return self; 
}(this.jQuery, this)); 

Answer 1

既然你要NaN，我猜它实际上正在从这一行：

.hover(doHoverIn($(this).attr('position')) 

... WH ICH调用此：

setCurrentImage(global.parseInt(position, 10)); // note the parseInt() 

...调用该：

setVisibleImage(id); 

所以position传递给parseInt从$(this).attr('position')来了，这很可能是不能被解析成一个值号码，所以你得到NaN。

在for语句块的第一行检出该属性的值。

for (i = 0;i < totalImages; i++) { 
    console.log($(this).attr('position')); // verify the value of position 
    // ...