Question

我看到了这个问题 Moving Div Box using javascript 顶级的回答是好的。

但是如果我想得到像CSS3那样的功能，我该怎么办？

＆＃13;

.cuble{
	height: 100px;
	width: 100px;
	background-color: blue;
	transition: all 3s ease-in-out;
}

.cuble:hover{
	transform: translateX(500px);
}

＆＃13;

<!Doctype html>
<html>

<body>
<div class="cuble">
</div>

</body>

＆＃13;

我不需要轻松进出效果。我只想将div悬停一次，即使我将鼠标移出div，div也会从左向右移动直到设置时间。但Moving Div Box using javascript不符合要求。

我尝试使用Promise来实现目标，这是我的Javascript代码。（无论如何，也许我只想深入了解javascript异步性能）

var cuble = document.querySelector('.cuble');
cuble.onmouseover = function(e) {
for (var i = 0; i < 100; i++) {
    var pixels = 5 * i + "px";
    delay(100)
        .then(() => cuble.style.marginLeft = pixels)
  }
}

function delay(t) {
return new Promise(function(resolve) {
    setTimeout(resolve, t)
    });
};

如何修复我的Javascript代码并满足要求？

Answer 1

问题是你正在创造100个承诺，每个承诺几乎立即延迟100毫秒，所以他们几乎立即开火。

解决问题的一种方法是增加每个后续承诺的延迟。而且你还必须为每个分辨率传递相应的像素。类似的东西：

var cuble = document.querySelector('.cuble');

cuble.onmouseover = function(e) {
  for (var i = 0; i < 100; i++) {
    var pixels = 5 * i + "px";

    delay(i * 20, pixels)
      .then((p) => cuble.style.marginLeft = p)
  }
}

function delay(t, pixels) {
  return new Promise(function(resolve) {
    setTimeout(() => resolve(pixels), t)
  });
};

DEMO

没有承诺的示例，只创建和调用了一个函数，而不是为每个步骤创建新函数：

var cuble = document.querySelector('.cuble');

cuble.onmouseover = function() {
  var left = 0,
      ival = setInterval(move, 5);

  function move() {
    if (left === 500) clearInterval(ival); 
    cuble.style.marginLeft = left++ + 'px';
  }
}

DEMO

在特定时间使用纯JavaScript移动Div Box

1 个答案: