游戏循环中一个元素上的两个jQuery动画

Question

我试图通过在某个元素上运行另一个动画时单击一个按钮来使html元素跳转。如果满足条件（在对健康至关重要的情况下闪烁）或单击按钮（在进食时跳转），则在游戏循环中触发动画。

问题：每次循环重复时，动画函数都会再次调用并放入队列中；如果一切正常，闪烁不会停止。仅当它是默认队列（“ fx”）时，才清除动画的回调函数中的队列，但我需要几个自定义队列。
对我来说，使用全局布尔变量来允许或拒绝动画函数被调用并不是解决方案，因为我希望jump（）和flash（）动画可以被多个html元素使用。

我了解了如何在learn.jquery.com中的元素上排队和启动第二个队列，还阅读了关于动画和排队的jQuery API documentations，但找不到解决方案。

签出flashAnimation1（），这是预期的结果：队列在回调中清除，因此如果触发停止，该元素将停止闪烁。但这仅适用于默认（fx）队列。

letJump1（无队列）和letJump2（自定义队列）使元素在不受控制的情况下上升或缩小。

flashAnimation2（）是一个闪烁的烂摊子。

能帮我吗？

let requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || windows.msRequestAnimationFrame;
let cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame;

let reqAnimF;

let progress = 0;
let lastRender = 0;
let animationOn = false;

const button = document.getElementById("button");
const state = document.getElementById("state");
const jump = document.getElementById("jump");
const block = $("#fadeInAndOut");

const changeStatus = () => animationOn = !animationOn;

const flashAnimation1 = (element) => { $(function() {
    element.animate( {opacity: 0}, "fast", "linear" )
    .animate( {opacity: 1}, "fast", "linear", ()=> element.clearQueue() );
    })
}

const flashAnimation2 = (element) => { $(function() {
    element.queue("flash", (next)=> {
    element.animate( {opacity: 0}, {
        duration: "fast",
        easing: "linear",
        queue: "flash"
    }).animate( {opacity: 1}, {
            duration: "fast",
            easing: "linear",
            queue: "flash",
            complete: element.clearQueue()
    });
    next();
    }).dequeue("flash");
    });
};

// Jumping: no queue
const letJump1 = (element) => { $(function() {
    element.animate( {width: "+=50", height: "+=20"}, {
        duration: "fast",
        queue: false,
        always: () => {
            element.animate( {width: "-=50", height: "-=20"}, {
                duration: "fast",
                queue: false                        
            });
        }
        }
    );
})};

// Jumping queued to another queue
function letJump2(element) {
    $(function() {
        element.queue("jump", function(next) {
            element.animate({width: "+=50", height: "+=20"}, {
                duration: "fast",
                queue: "jump"
            })
            .animate( {width: "-=50", height: "-=20"}, {
                duration: "fast",
                queue: "jump"
            });
            next();
        }).dequeue("jump");
    })
};


//////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////

/* function update(progress) {} */

function draw() {
    state.innerHTML = animationOn;
    if (animationOn) {
        flashAnimation2(block);
    }
}

function loop(timestamp) {
    progress = timestamp - lastRender;
    /* update(progress); */
    draw();

    lastRender = timestamp;
    reqAnimF = requestAnimationFrame(loop);
}

button.addEventListener("click", changeStatus);
//jump.addEventListener("click", letJump1(block)); // button is dead for some reason

reqAnimF = requestAnimationFrame(loop);

.center {
    position: relative;
    margin: auto;
    width: 300px;
    height: 300px;
    text-align: center;
    border: 1px solid red;
}
button {
    margin: 0 0 20px;
}
#fadeInAndOut {
    margin: auto;
    width: 100px;
    height: 100px;
    background-color: black;
}
#jump {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="center">
    <h1 id="state"></h1>
    <button type="button" id="button">Flash on/off</button>
    <div id="fadeInAndOut"></div>
    <button type="button" id="jump" onclick="letJump1(block)">Jump</button>
</div>