「Math.abs（parseInt函數（$（本）的.css（ '左'）」 返回不同的值比預期

Question

例子：jsfiddle

<style> 
#slider-outer { 
width: 400px; 
overflow: hidden; 
} 

#slider-inner { 
width: 1200px; 
overflow: visible; 
height: 200px; 
position: relative; 
} 

#slider-inner div { 
background: ; 
width: 200px; 
height: 200px; 
float: left; 
} 

.a{background: red;} 
.b{background: green;} 
.c{background: blue;} 
.d{background: yellow;} 
.e{background: grey;} 
.f{background: coral;} 
.g{background: olive;} 
</style> 

<div id="slider-outer"> 
    <div id="slider-inner"> 
     <div class="a"></div> 
     <div class="b"></div> 
     <div class="c"></div> 
     <div class="e"></div> 
     <div class="f"></div> 
     <div class="g"></div> 
    </div> 
</div> 

$(document).ready(function(){ 

$('#slider-inner').click(function(){ 

var scrollAmount = $(this).width() - $(this).parent().width(); 
var currentPos = Math.abs(parseInt($(this).css('left'))); 
var remainingScroll = scrollAmount - currentPos; 
var nextScroll = Math.floor($(this).parent().width()/2); 

if (remainingScroll < nextScroll) { 
    nextScroll = remainingScroll; 
} 

if (currentPos < scrollAmount) { 
    $(this).animate({'left':'-=' + nextScroll}, 'slow'); 

    console.log(currentPos) 
} 

else { 
    $(this).animate({'left':'0'}, 'fast'); 
} 
}); 
}); 

我會通過學習jQuery和一些javascript的過程，我遇到了一個簡單滑塊的示例，並且正在瀏覽代碼行並理解它是如何工作的。除了var = currentPos返回到控制檯的值外，我瞭解了所有內容。

該值在第一次點擊時返回0，這讓我感到困惑，因爲我認爲它應該是-200px，因爲滑塊內部正在將-200px移動到左側？

有人可以請解釋爲什麼變量返回值是它的控制檯？

感謝

Answer 1

的console.log語句不等待動畫完成，即使它，currentPos將保持在0，作爲動畫不會改變變量的值。

一種更好的方式理解上的差異是如此：

if (currentPos < scrollAmount) { 
    $(this).animate({'left':'-=' + nextScroll}, 'slow', function(){ 
    console.log("After the animation has completed: " + $(this).css('left')); 
    }); 
    console.log("Before the animation has completed: " + $(this).css('left')) 
} 

的第三個參數.animate()是當動畫完成後，將要執行的匿名函數。

這將輸出：

Before the animation has completed: 0px 
After the animation has completed: -200px 

這是希望符合你的期望更多。

Answer 2

如果您查看#slider-inner的CSS規則，您會發現它沒有明確的left集合。

#slider-inner { 
width: 1200px; 
overflow: visible; 
height: 200px; 
position: relative; 
} 

因爲沒有明確的left值，則默認爲auto。由於#slider-inner是相對定位的，它也沒有指定right屬性，it receives no offset。

這意味着left實際上是0px（這正是您在第一次點擊時運行$(this).css('left')時得到的結果）。 var currentPos = Math.abs(parseInt($(this).css('left')));將該值解析爲絕對整數0，並將其存儲在變量currentPos中。如果你看一下所有的後自帶的代碼：在那裏

var remainingScroll = scrollAmount - currentPos; 
    var nextScroll = Math.floor($(this).parent().width()/2); 

    if (remainingScroll < nextScroll) { 
     nextScroll = remainingScroll; 
    } 

    if (currentPos < scrollAmount) { 
     $(this).animate({'left':'-=' + nextScroll}, 'slow'); 
     console.log(currentPos) 
    } 

    else { 
     $(this).animate({'left':'0'}, 'fast'); 
    } 
    }); 
}); 

沒有分配一個新的價值currentPos，所以值保持0。將字符串解析爲整數所得到的零是文字，而不是對當前值.left的引用。即使它是對DOM元素的.left屬性的實時引用，它不會是-200，.animate方法異步運行，console.log在它之後立即被調用，它可能在調用之間的時間內向左移動了幾個像素.animate和控制檯輸出，但肯定不是完整的200像素。