javascript - 如何使用 JavaScript 从左到右移动元素，返回并重复？

Question

我正在使用纯 JavaScript 创建平面动画。

有一个类 Plane 有方法 flyRight() 和 flyLeft()。在这两个类方法中，我都使用 setInterval(fucntion() { ... }, 1) 将飞机每 1 毫秒向左或向右移动一次。

我有一个问题确保在执行 myPlane.flyRight() 之后，它不会执行 myPlane.flyLeft() - 代码段中有问题的行标记为评论 //DOES NOT WORK.

class Plane {
  constructor(htmlId, speed) {
    this.plane = document.getElementById(htmlId);     // plane HTML element
    this.width = parseInt(document.getElementById(htmlId).offsetWidth);     // plane's width
    this.speed = speed;   // pixels per milisecond
    this.range = parseInt(window.innerWidth);     // plane's range
  }
  
  flyLeft() {
    var minLeftPos = 0 - this.width - 10;
    var planeSpeed = this.speed;
    if (this.plane.style.left === '') {
      this.plane.style.left = 0
    }
    
    var moveLeft = setInterval(function() {
      if (parseInt(this.plane.style.left) >= minLeftPos) {
        this.plane.style.left = parseInt(this.plane.style.left) - planeSpeed + 'px';
      } else {
        clearInterval(moveLeft);
        this.plane.style.transform = 'rotate(180deg)';    // turns around
        this.flyRight();     // DOES NOT WORK
      }
    }, 1)
  }
  
  flyRight() {
    var maxLeftPos = this.range + this.width + 10;
    var planeSpeed = this.speed;
    if (this.plane.style.left === '') {
      this.plane.style.left = 0
    }

    var moveRight = setInterval(function() {
      if (parseInt(this.plane.style.left) <= maxLeftPos) {
        this.plane.style.left = parseInt(this.plane.style.left) + planeSpeed + 'px';
      } else {
        clearInterval(moveRight);
        this.plane.style.transform = 'rotate(180deg)';     // turns around
        this.flyLeft();     // DOES NOT WORK
      }
    }, 1)
  }
  
  fly() {
    this.flyRight();
  }
}

myPlane = new Plane("plane", 3);
myPlane.fly();

html, body {
  overflow: hidden;
}


.plane {
  width: 200px;
  height: 168px;
  position: absolute;
  top: 0;
  left: 0;
  background-image: url('https://cdn.pixabay.com/photo/2014/04/02/10/22/airplane-303639_960_720.png');
  background-position: center;
  background-size: cover;
}

<div id="plane" class="plane"></div>

Answer 1

问题出在您的 setInterval 函数中的绑定(bind)(请注意，在我使用 .bind 的函数末尾)。 setInterval 和 setTimeout 中使用的回调函数需要绑定(bind)到一个范围，以便处理 this。

有一种更简洁的方法，它涉及使用箭头函数而不是 function(){} 格式。该方法起作用的原因是箭头函数保留了 lexical scoping ，这正是 bind 函数正在做的事情。因此，通过使用箭头函数，您根本不必使用 .bind，它是免费提供的。

class Plane {
  constructor(htmlId, speed) {
    this.plane = document.getElementById(htmlId);     // plane HTML element
    this.width = parseInt(document.getElementById(htmlId).offsetWidth);     // plane's width
    this.speed = speed;   // pixels per milisecond
    this.range = parseInt(window.innerWidth);     // plane's range
  }
  
  flyLeft() {
    var minLeftPos = 0 - this.width - 10;
    var planeSpeed = this.speed;
    if (this.plane.style.left === '') {
      this.plane.style.left = 0
    }
    
    var moveLeft = setInterval(function() {
      if (parseInt(this.plane.style.left) >= minLeftPos) {
        this.plane.style.left = parseInt(this.plane.style.left) - planeSpeed + 'px';
      } else {
        clearInterval(moveLeft);
        this.plane.style.transform = 'rotate(180deg)';    // turns around
        this.flyRight();     // DOES NOT WORK
      }
    }.bind(this), 1)
  }
  
  flyRight() {
    var maxLeftPos = this.range + this.width + 10;
    var planeSpeed = this.speed;
    if (this.plane.style.left === '') {
      this.plane.style.left = 0
    }

    var moveRight = setInterval(function() {
      if (parseInt(this.plane.style.left) <= maxLeftPos) {
        this.plane.style.left = parseInt(this.plane.style.left) + planeSpeed + 'px';
      } else {
        clearInterval(moveRight);
        this.plane.style.transform = 'rotate(180deg)';     // turns around
        this.flyLeft();     // DOES NOT WORK
      }
    }.bind(this), 1)
  }
  
  fly() {
    this.flyRight();
  }
}

myPlane = new Plane("plane", 3);
myPlane.fly();

html, body {
  overflow: hidden;
}


.plane {
  width: 200px;
  height: 168px;
  position: absolute;
  top: 0;
  left: 0;
  background-image: url('https://cdn.pixabay.com/photo/2014/04/02/10/22/airplane-303639_960_720.png');
  background-position: center;
  background-size: cover;
}

<div id="plane" class="plane"></div>