网页资讯视频图片知道文库贴吧地图采购
进入贴吧全吧搜索
前端吧 关注：223,861贴子：1,380,962
  • 17回复贴，共1页

大佬，请教一下！

我想问下 ，这个变量写在函数里面和外面有啥区别，按道理，函数里面的可以访问函数外面的，但为啥放在外面会出错，放在里面却没事


报错都不贴出来，鬼知道啊


很明显你这个定时器开着是来记录步数变化的 你放外面那步数不就一直不回边


你里面重新声明了，引用个毛线，还有不要用var，用let


在外面只执行函数调用的次数，在里面执行的是定时器调用的次数


你都开定时器了 每次执行的时候都会把定时器里的语句执行一遍


楼主需要好好学习学习js运行机制了。setinterval callback里的函数，如果使用外部变量，并且变量为primitive type，callback函数会直接替换这个变量为它的值，也就是说，你这个step在外面计算，等到setinterval callback运行的时候，一直是外面计算的值，值不会发生改变，也就跟你的obj和target什么的完全没有关系了


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>
<style>
.box {
position: absolute;
/* 注意初始一下 */
left: 0;
width: 100px;
height: 100px; background-color: red;
}
</style>
</head>
<div class="box"></div>
<body>
<script>
function animate(obj, target, callback) {
clearInterval(obj.timer);
var step = (target - obj.offsetLeft) / 10;
step = step < 0 ? Math.ceil(step) : Math.floor(step); // 小于0才向上求整
obj.timer = setInterval(function () {
// == target(需要10的倍数) 要么就用小于等于 target <= obj.offsetLeft
/*
target 201
step 201-0 201/10 20.1
20.1小于0为false 然后向下取整step为20
然后定时器执行累加到obj.offsetLeft获取200
201 == 200 为false
所以target需要10的倍数（要么就<=）
*/
if (target == obj.offsetLeft) {
clearInterval(obj.timer);
if (callback) { callback();
}
return; // 清除定时器 已经到达目标 没必要往下执行（防止多出）
}
obj.style.left = obj.offsetLeft + step + 'px';
}, 15);
}
animate(document.querySelector('.box'), 200, function () { console.log('已到达地点!');
});
</script>
</body>
</html>


扫二维码下载贴吧客户端

下载贴吧APP
看高清直播、视频！
  • 17回复贴，共1页
分享到: