Question

我编写了一个基本功能（庆祝），该功能在鼠标上运行时进入页面上的链接。

它将创建一个p元素，然后调用一个函数（移动），该元素将元素从页面的右侧移至左侧。

即使您鼠标离开元素，我也希望该移动功能能够运行。

不幸的是，当您将鼠标移出时，不仅移动文本消失，而且所有链接都以相同的速率移动。如果某个元素开始移动，然后将鼠标悬停以创建新的移动元素，则它将两个移动元素都移回右侧，并将它们彼此对齐。

我知道我的代码做错了，但我不知道什么：）

function celebrate(link) {
    let celebration = document.createElement("p");
    let celebrationtext = document.createTextNode(link.text);
    celebration.appendChild(celebrationtext);
    document.body.appendChild(celebration);
    celebration.className = 'moving';
    celebration.style.top = link.getBoundingClientRect().top;
    move(celebration, 1100);
}

function move(object, X){
    let thisobject = object;
    console.log(thisobject);
    if ( object != null ) {
        intX=X-3;
        thisobject.style.left = (intX).toString() + 'px';
    } //if
    if ( X > 0 ) { 
        setTimeout(function(){move(thisobject,intX)},20); 
    } else {
        thisobject.remove();
    }
    return true;
}

我已经使用Eloquent Javascript的章节标题创建了JSfiddle

jsFiddle

Answer 1

这是因为您的intX是全局变量，所有move(thisobject,intX)都使用它。

如果在move函数内部声明，它将得到修复。

let thisobject = object,
    intX;

更新的小提琴：https://jsfiddle.net/63njmxrt/6/

或者您可以完全删除intX并在将X作为参数传递时将其减小

function move(object, X) {
  let thisobject = object;

  if (object != null) {
    thisobject.style.left = (X).toString() + 'px';
  } //if
  if (X > 0) {
    setTimeout(function() {
      move(thisobject, X-3)
    }, 20);
  } else {
    thisobject.remove();
  }
  return true;
}

Answer 2

如下更新您的setTimeout函数。

setTimeout(move, 20, thisobject, intX);

以上是使用setTimeout传递参数的正确方法。

就像setTimeout（function，timeout，param1，param2，..）

更新的小提琴：https://jsfiddle.net/evg7npbL/

为什么我的函数在所有创建的元素上运行？

2 个答案: