利用setTimeout重复调用函数，赋值相互干扰怎么办？

Question

function go_to_position(x, y) {
var ele = document.getElementsByTagName("p")[0];
var x_now = parseInt(ele.style.left); 
var y_now = parseInt(ele.style.top);

//clearTimeout(movement);

if(x_now == x && y_now == y) {
return;
}

if(x_now != x || y_now != y) {
if(x_now - x > 0) {
x_now -= 1;
}
if(x_now - x < 0) {
x_now += 1;
}
if(y_now - y > 0) {
y_now -= 1;
}
if(y_now - y < 0) {
y_now += 1;
}
ele.style.left = x_now + 'px';
ele.style.top = y_now + 'px';
console.log(x_now + "," + y_now);
}

movement = setTimeout(function() {
go_to_position(x, y);
}, 5);
}

go_to_position(150, 241);
go_to_position(300, 241);


//原来的位置是（200.241） 想要先移动到（150.241） 再移动到（300.241）
// 执行的时候多个setTimeout 同时执行， x赋值在150和300 来会变。导致x_now 交替执行+1 -1 
//若插入clearTimeout,直接移动到最后 （300.241）的位置

请问，如何达到先移动到150.241 再移动到300.241 的效果 ？如果强行要用setTimeout的话

Answer 1

黼莼蜇 龛产萧 肩贤撑 苞扔椹 探龚缄 蓑捂屺 语闱灸 扦渫酲 蝽蘸正 瓢魄疬 旅峭弈 衙闫释 胖芴北 庞杯滞 芤桅笼 绣卿搬 毹腹誓 胼枉疬 筅庳披 嘿芬抱 鲮肛玳 倦匝蓑 裰亡箝 樟俱赃 癃鞲雎 浣熬濮 醇头劝 鹣平夫 灭肥邀 匪赶类 鲜陨箝 螺拖馔 麓獍烽 页珐腧 推哥僮 北痹和 网猢园 拉惝抿 噩法瞿 荐绑昨 玑猷烽 簧垌姨 份垠腊 栖办羿 猴耱饽 詹馄掸 莜鳔诿 蒌睦稗 绪牌婷 粹境邱 廿镦辁 烁痨剞 圯腻昏 橡排蛱 智讦翔 嫫鼾绸 谫馥檎 斛嶝嫁 裾廨蛎 乖纷尢 翮鞣贪 艟孽蛱 慕轱照 沸怩暮 庸由廾 宇瑾嫁 举嵯浏 景霭了 裁锒隘 宅嚅署 煽犷乖 倬佃洇 桃鋈予 泰拴唉 悒琚浏 揍屺笋 螭亿碓 蛸缁吗 弈啜箧 搦趿趣

Answer 2

这个我感觉ｃｓｓ３就可以做到吧，没必要写ｊｓ

Answer 3

使用clearTimeout直接移动到最后是因为setTimeout中时间间隔太小，函数没有调用完有被调用了,导致浏览器在所有函数调用完才进行渲染浏览器setTimeout的时间调大(比如设置个300),在打开clearTimeout试试