如何运行 JavaScript 中原型内部的回调函数？

Question

根据这篇 question and mdn.doc 文章，我在 prototype 中提供了一个 Callback 函数，用于在完成后管理下一个代码行。

但即使我创建了 Callback，浏览器仍然忽略它和运行下一行代码，无论 Callback 是否完成。

这是代码：

'use strict';
(function() {

  function Box($el, $frame) {
    // Reassign the Values
    this.$el = $el;
    this.$frame = $frame;

    // Event Register Zone
    this.$el.addEventListener('touchstart', (e) => this.start(e));
    this.$el.addEventListener('touchmove', (e) => this.move(e));
    this.$el.addEventListener('touchend', (e) => this.end(e));
  }

  Box.prototype = {
    start: function(e) {
      console.log('touchstart has been detected');
    },
    move: function(e) {
      console.log('touchmove has been detected');
    },
    end: function(e) {
      console.log('touchend has been detected');
      this.getanAction(this.moveTop);
    },
    getanAction: function(callback) {
      let bound = callback.bind(this);
      bound();
      this.$frame[1].classList.add('leftMover');
      // Expectation: move the purple box first, and move the orange box next
    },
    moveTop: function() {
      this.$frame[0].classList.add('topMover');
    }
  }

  /***************************************************************/
  // Declare & Assign the Original Values

  let _elem = document.getElementById('box');
  let _frame = _elem.querySelectorAll('.contents');

  const proBox = new Box(_elem, _frame);

}());

      * {
        margin: 0;
        padding: 0;
      }
      #box {
        width: auto;
        height: 800px;
        border: 4px dotted black;
      }
      .contents {
        position: absolute;
        width: 200px;
        height: 200px;
        float: left;
        top: 0;
        left: 0;
        transition: 800ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
      }
      .purple { background-color: purple; }
      .orange { background-color: orange; }

      .topMover { top: 600px; }
      .leftMover { left: 600px; }

    <div id="box">
      <div class="contents purple">

      </div>
      <div class="contents orange">

      </div>
    </div>

我的期望是 .orange 框移动在 .purple 框移动完成后。

我是否遗漏了代码或代码有误？

Answer 1

问题是它们被一个接一个地调用，没有延迟，因为 JavaScript 不会等待 CSS 转换完成才移动到下一行。

我已经修复了在调用 bound 回调之前等待第一个转换完成的问题。这样紫色框就会移动，等待过渡完成，然后橙色框就会移动。

'use strict';
    (function() {

      function Box($el, $frame) {
        // Reassign the Values
        this.$el = $el;
        this.$frame = $frame;

        // Event Register Zone
        this.$el.addEventListener('touchstart', (e) => this.start(e));
        this.$el.addEventListener('touchmove', (e) => this.move(e));
        // Added mouse up so it works on desktop
        this.$el.addEventListener('mouseup', (e) => this.end(e));
        this.$el.addEventListener('touchend', (e) => this.end(e));
      }

      Box.prototype = {
        start: function(e) {
          console.log('touchstart has been detected');
        },
        move: function(e) {
          console.log('touchmove has been detected');
        },
        end: function(e) {
          console.log('touchend has been detected');
          this.getanAction(this.moveTop);
        },
        getanAction: function(callback) {
          let bound = callback.bind(this);
          // Listen for css transition end
          this.$frame[0].addEventListener('transitionend', function() {
         // Call callback to move orange box
            bound()
          });
          
          // Move the purple box now
          this.$frame[0].classList.add('topMover1')
        },
        moveTop: function() {
          this.$frame[1].classList.add('topMover2');
        }
      }

      /***************************************************************/
      // Declare & Assign the Original Values

      let _elem = document.getElementById('box');
      let _frame = _elem.querySelectorAll('.contents');

      const proBox = new Box(_elem, _frame);

    }());

* {
            margin: 0;
            padding: 0;
          }
          #box {
            width: auto;
            height: 800px;
            border: 4px dotted black;
          }
          .contents {
            position: absolute;
            width: 200px;
            height: 200px;
            float: left;
            top: 0;
            left: 0;
            transition: 800ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
          }
          .purple { background-color: purple; }
          .orange { background-color: orange; }

          .topMover1 { top: 600px; }
          .topMover2 { left: 600px; }

<div id="box">
          <div class="contents purple">

          </div>
          <div class="contents orange">

          </div>
        </div>

如何运行 JavaScript 中原型内部的回调函数？

How to run the Callback function inside of the prototype in JavaScript?

html

javascript

prototype

callback

synchronous