老师，有问题

# 具体遇到的问题
老师，像这种它代码不报错，我自己也盯了好久，就是找不到它到底哪儿出错了，请问应该怎么找出问题在哪儿呢？
# 粘贴全部相关代码，切记添加代码注释（请勿截图）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>封装形变类</title>
    <style>
      .ball {
        background: linear-gradient(#ff9b9b 50%, #106dbb 50%);
        width: 150px;
        height: 150px;
        border-radius: 50%;
      }
    </style>
  </head>
  <body>
    <div class="ball"></div>
    <script>
      //形变类
      class Transform {
        constructor(selector) {
          this.el = document.querySelector(selector);
          this._queue = [];
          this._transform = {
            rotate: "",
            translate: "",
            scale: "",
          };
          this.defaultTime = Transform.config.defaultTime;
          this.el.style.transition = `all ${0.3}s`;
        }

        //位移
        translate(value, time) {
          return this._add("translate", value, time);
        }

        //缩放
        scale(value, time) {
          return this._add("scale", value, time);
        }

        //形变
        rotate(value, time) {
          return this._add("rotate", value, time);
        }

        //添加动画
        _add(type, value, time = this.defaultTime) {
          this._queue.push({ type, value, time });
          return this;
        }

        //添加完成，可以开始动了
        done() {
          this._start();
        }

        //开始动，从队列中把动画一个个拿出来
        _start() {
          if (!this._queue.length) return;
          //先进先出
          setTimeout(() => {
            const info = this._queue.shift();
            this.el.style.transition = `all ${info.time / 1000}s`;
            this.el.style.transform = this._getTransform(info);

            setTimeout(() => {
              this._start();
            }, info.time);
          }, 0);
        }

        _getTransform({ type, value, time }) {
          const _tsf = this._transform;
          switch (type) {
            case "translate":
              _tsf.transform = `translate(${value})`;
              break;
            case "scale":
              _tsf.scale = `scale(${value})`;
              break;
            case "rotate":
              _tsf.rotate = `rotate(${value})deg`;
              break;
          }
          return `${_tsf.translate} ${_tsf.scale} ${_tsf.rotate}`;
        }
      }

      Transform.config = {
        defaultTime: 300,
      };

      const tf = new Transform(".ball");
      tf.translate("200px, 200px").scale(1.5).rotate(180, 5000).done();

      console.log(tf);
    </script>
  </body>
</html>
在这里输入代码，可通过选择【代码语言】突出显示

生南国 2020-10-22

源自：ES6 class 6-3 封装形变类（3）

收起

2回答

好帮手慕夭夭回答被采纳获得+3积分 2020-10-22 11:55:33

同学你好，如果不报错的话，那么我们要自己去猜想哪里出现问题，然后对代码的进行排查。例如打印出来看看结果是不是对的，或者直观的看代码的逻辑是不是对的等等。例如这里动画没有生效，那么我们就要先去排查动画是否添加上了，这里老师输出了一下，发现只有缩放生效了。如下：

首先猜想，其他两个动画的方法是否调用成功了，可以在方法中任意打印一下看方法是否执行：

发现也执行了（这里就不截图了），那么就要看方法中执行的代码是否有问题，这里是调用了_add方法，所以进一步去排查这个方法。我们打印一下它的返回值：

看看样式是否添加成功，然后就发现问题了。translate没有添加上值，反而多了一个transform属性。另外rotate单位书写格式也不对，应该和180放在一个括号里面。

问题发现了，找到对应的代码，修改即可：

哪里出现问题，就要找到对应的代码，然后顺藤摸瓜一点一点的排查。当然了，排查错误也不是那么简单的，初学者排查问题的速度肯定会很慢，等以后经验多了，排查错误的能力也就提升了，慢慢来哦~

祝学习愉快~

收起回答

生南国提问者 #1

谢谢老师的耐心解答，我自己也尝试着去试了一遍，学到了一点点，但是让我现阶段去排查错误我可能会直接忽略。第一步在 translate 方法中打印1，发现方法执行成功了。那我第二步跟着老师的思路回去 _add 方法中随便打印一个2，也会发现执行成功了。。。。于是我便直接与错误代码擦肩而过了。。。我该怎么去确定什么时候能够随意打印，什么时候要去打印方法里面的函数呢，到时候方法里面的东西多了，我感觉出错误了，就直接凉了

2020-10-22 12:15:40