Как перезапустить или оставить цикл без накладки?

Question

[Артем]

При переходе курсором по 'el1' и 'el2' скорость вращения увеличивается . Как избежать данной погрешности , чтобы циклы не налаживались при переходе , подскажите ? За ранее спасибо за внимание !

<div class="mbi-inner1">
                <div class="gear" id="gear1" attr-gear="1"></div>
                <div class="gear" id="gear11"></div>
                <div class="gear" id="gear2" attr-gear="2"></div>
                <div class="gear" id="gear22"></div>
                <canvas id="c"></canvas>
            </div>

window.onload = function () {
    function CoolShadow(config) {
        this.config = config;
        this.arr = [];
        fl = [];
        el = document.querySelector(config.el);
        el1 = document.querySelector(config.el1);
        el2 = document.querySelector(config.el2);
        el11 = document.querySelector(config.el11);
        el22 = document.querySelector(config.el22);
        self = this;

        this.start = function () {
            el1.onmouseenter = self.one == true ? self.one : el2.onmouseenter = self.one;
        }
        this.stop = function () {
            el1.onmouseleave = self.null == true ? self.null : el2.onmouseleave = self.null;
        }

        this.one = function () {
            fl.pop();
            fl.push(1);
            self.therotate();
        }
        this.null = function () {
            fl.pop();
            fl.push(0);
            self.therotate();
        }
        this.therotate = function () {
            stoploop = fl == 0 ? true : false;
            mass = self.arr.join();
            numb = 0;
            for (i = 0; i <= numb; i++) {
                if (stoploop) { // if it's true = then happen break;
                    check = false;
                    break;
                }
                setTimeout(function () {
                    self.arr.pop();
                    self.arr.push(Number(mass) + 1);
                    if (mass == '360') {
                        self.arr.pop();
                    }
                    self.therotate();
                }, 30)
            };
            el1.style.transform = "rotate(" + mass + "deg)";
            el11.style.transform = "rotate(" + mass + "deg)";
            el2.style.transform = "rotate(-" + mass + "deg)";
            el22.style.transform = "rotate(-" + mass + "deg)";
        }
        this.start();
        this.stop();
    };
    new CoolShadow({ // Объект с данными передаваемый в функцию
        'el': '.gear',
        'el1': '#gear1',
        'el2': '#gear2',
        'el11': '#gear11',
        'el22': '#gear22',
    });
};