Date.now()相减会出现 NaN 的问题，求教
jquery吧
全部回复
仅看楼主
level 1
古城忆旧人 楼主
首先js代码如下
setTimeout(function() {
var a = 0,wdw1;
$($(".yscroll_list_left li")[0]).clone(!0).insertAfter($($(".yscroll_list_left li")[$(".yscroll_list_left li").length - 1]));
var len = $(".yscroll_list_left li").length;
b();
var old = Date.now();
function b() {
a -= 44;
if(a >= 44 * -(len - 2) ){
console.log("1_1",a,Date.now()-old);
$(".yscroll_list_left").animate({marginTop: a}, 2000);
console.log("1_2",a,Date.now()-old);
}
else{
$(".yscroll_list_left").animate({marginTop: a}, 2000, function() {
a = 0;
$(".yscroll_list_left").css({
marginTop: 0
})
});
}
wdw1 = setTimeout(b,3000);
}
}, 0);
在chrome中执行结果如下
test.html:42 1_1 -44 NaN
test.html:44 1_2 -44 NaN
test.html:42 1_1 -88 3001
test.html:44 1_2 -88 3003
test.html:42 1_1 -132 6003
test.html:44 1_2 -132 6004
test.html:42 1_1 -176 9004
test.html:44 1_2 -176 9005
上边的是一个不断循环重复的结果，只是以后的 -44后边的内容不再是NaN,而是具体数字了。
想不明白为什么Date.now()-old会得出NaN，如果是因为数太小的话，那么单独像下面一样
var old = Date.now();
console.log(Date.now() - old);
上述代码会输出 0 或者是 1，而非NaN
另外，在火狐上测试，结果和chrome一样，也是前两个 -44 后边为NaN，而以后的 -44后边就变为数字
上边的只是JS代码，下边是完整的代码，可以执行的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#yscroll_list{
height:16px;
overflow:hidden;
}
#yscroll_listin{
position:relative;
overflow:hidden;
}
#yscroll_listin ul {
position:relative;
margin-left:50px;
}
</style>
<script src="jquery-1.7.1.min.js"></script>
<script>
window.onload = function(){
setTimeout(function() {
var a = 0,wdw1;
$($(".yscroll_list_left li")[0]).clone(!0).insertAfter($($(".yscroll_list_left li")[$(".yscroll_list_left li").length - 1]));
var len = $(".yscroll_list_left li").length;
b();
var old = Date.now();
function b() {
a -= 44;
if(a >= 44 * -(len - 2) ){
console.log("1_1",a,Date.now()-old);
$(".yscroll_list_left").animate({marginTop: a}, 500);
console.log("1_2",a,Date.now()-old);
}
else{
$(".yscroll_list_left").animate({marginTop: a}, 500, function() {
a = 0;
$(".yscroll_list_left").css({
marginTop: 0
})
});
}
wdw1 = setTimeout(b,1000);
}
}, 0);
}
</script>
</head>
<body>
<div class="yscroll_list">
<div class="yscroll_listin">
<ul style="margin-top: 0px;" class="yscroll_list_left">
<li><p class="yscrollfont">111</p></li>
<li><p class="yscrollfont">222</p></li>
<li><p class="yscrollfont">333</p></li>
<li><p class="yscrollfont">444</p></li>
<li><p class="yscrollfont">555</p></li>
</ul>
</div>
</div>
</body>
</html>
2016年05月20日 14点05分 1
1