javascript - 停止一个功能并切换另一个功能

Question

我设置了两组循环函数来垂直或水平地设置 svg 的动画。我想在每次点击时切换正在运行的动画，因此我需要停止/终止当前触发的功能并调用替代的“向上”功能。我该怎么做呢？任何帮助将不胜感激

var Rightscale = {
    svgEl: $('#right').find('svg'),
    svgH: $('#right').find('.scale').height(),
    svgW: $('#right').find('.scale').width(),
    cntH: $('#right').height(),
    cntW: $('#right').width(),

    init: function() {
        Rightscale.svgEl.on("click", function() {
            Rightscale.verticalUp(Rightscale.svgEl)
        });
    },
    verticalUp: function($elt) {
        var scaleH = Rightscale.cntH / Rightscale.svgH;
        $elt.css('transform', 'scaleY(' + scaleH + ')')
        setTimeout(function(){
            Rightscale.verticalDown($elt);
        }, 5000);
        
    },
    verticalDown: function($elt) {
        $elt.css('transform', 'scaleY(1)')
        setTimeout(function(){
            Rightscale.verticalUp($elt);
        }, 5000);
    },
    horizontalUp: function($elt) {
        var scaleW = Rightscale.cntW / Rightscale.svgW;
        $elt.css('transform', 'scaleX(' + scaleW + ')')
        setTimeout(function(){
            Rightscale.horizontalDown($elt);
        }, 5000);
    },
    horizontalDown: function($elt) {
        $elt.css('transform', 'scaleX(1)')
        setTimeout(function(){
            Rightscale.horizontalUp($elt);
        }, 5000);

    }
}

$(document).ready(function() {
    Rightscale.init();
});

#right {
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
}
.scale {
    font-size: 0px;
    width: 40%;
}
svg {
    transition: transform 5000ms linear;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="right">
<div class="scale">
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
        viewBox="0 0 392 132" style="enable-background:new 0 0 392 132;" xml:space="preserve">
    <g>
        <path d="M81.2,117.5c-6.6,8.8-17.5,13-34.8,13c-17.7,0-28.6-4.3-35.2-13.9c-5.3-7.5-7.7-17.1-8.5-32.4c-0.2-4.3-0.4-9.8-0.4-16.6
            c0-18.4,0.9-27.3,3.6-37.3C7.2,25.5,9.2,21,11.7,17C18.5,6.7,29,2,45.6,2c17.3,0,27.9,3.8,34.6,12.4c7.9,10.2,10.4,22,10.4,51.2
            C90.6,93.4,87.9,108.1,81.2,117.5z M57.4,66.1l-0.2-16.4C56.9,24,56.1,21.9,46.9,21.9c-6.2,0-9.4,3.4-10.2,10.9
            c-0.6,7.5-0.9,21.8-0.9,38.4c0,13,0.2,25,0.8,29.4c0.8,6.2,4.1,9.4,10,9.4c5.6,0,9-3.2,9.8-9.6c0.6-4.5,1.1-19.2,1.1-31.1V66.1z"/>
</g>
    </svg>
</div>
</div>

Answer 1

您需要一个要停止的 TimeOut 的句柄:

    verticalDownTimeout = setTimeout(function(){
        Rightscale.verticalDown($elt);
    }, 5000);

你可以用

来阻止它

clearTimeout(verticalDownTimeout);

我会把细节留给你，我相信你能处理好。