单击两个函数循环之间的切换

Question

我已经设置了两组函数，其中一组是垂直循环(Rightscale.verticalUp和Rightscale.verticalDown)，另一组是水平循环(Rightscale.horizontalUp或Rightscale.horizontalDown)。单击SVG应该在每个循环之间交替--停止一个循环，然后无限地启动另一个循环。我该怎么做呢？我想，不知何故，我需要找出刚刚调用的函数，关闭它，并从备用循环调用一个函数？

任何帮助都将不胜感激。

​

var Rightscale = {
    identifier: 0,
    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() {
            if(Rightscale.svgEl == 0 || 3 || 4) {
                // Here I want to stop Rightscale.horizontalUp or Rightscale.horizontalDown if it is running but how?
                Rightscale.verticalUp(Rightscale.svgEl)
            } else if(Rightscale.svgEl == 1 || 2) {
                // Here I want to stop Rightscale.verticalUp or Rightscale.verticalDown if it is running, how can I do this?
                Rightscale.horizontalWide(Rightscale.svgEl)
            }
        });
    },
    verticalUp: function($elt) {
        var scaleH = Rightscale.cntH / Rightscale.svgH;
        Rightscale.identifier = 1
        $elt.css('transform', 'scaleY(' + scaleH + ')')
        var verticalUpTimeout = setTimeout(function(){
            Rightscale.verticalDown($elt);
        }, 5000);
        console.log(Rightscale.identifier)
    },
    verticalDown: function($elt) {
        Rightscale.identifier = 2
        $elt.css('transform', 'scaleY(1)')
        var verticalDownTimeout = setTimeout(function(){
            Rightscale.verticalUp($elt);
        }, 5000);
        console.log(Rightscale.identifier)
    },
    horizontalWide: function($elt) {
        Rightscale.identifier = 3
        var scaleW = Rightscale.cntW / Rightscale.svgW;
        $elt.css('transform', 'scaleX(' + scaleW + ')')
        var horizontalWideTimeout = setTimeout(function(){
            Rightscale.horizontalSmall($elt);
        }, 5000);
        console.log(Rightscale.identifier)
    },
    horizontalSmall: function($elt) {
        Rightscale.identifier = 4
        $elt.css('transform', 'scaleX(1)')
        var horizontalSmallTimeout = setTimeout(function(){
            Rightscale.horizontalWide($elt);
        }, 5000);
        console.log(Rightscale.identifier)
    }
}

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

#right {
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
}
.scale {
    font-size: 0px;
    width: 20%;
}
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"
         style="enable-background:new 0 0 0 100;" 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

你的问题就在这一行：

if(Rightscale.svgEl == 0 || 3 || 4) {

将这一行改为：

if([0, 3, 4].indexOf(Rightscale.identifier)>-1) {

如果Rightscale.svgEl是03，则测试条件返回true :无论如何，它总是正确的。

此外，如果新的单击发生在较短的超时延迟内，则清除超时：

最后一个需要考虑的方面是过渡结束事件:为此，您可以查看过渡端。

​

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

    init: function() {
        Rightscale.svgEl.on("click", function(e) {
            clearTimeout(Rightscale.timerId);
            if([0, 3, 4].indexOf(Rightscale.identifier)>-1) {
                // Here I want to stop Rightscale.horizontalUp or Rightscale.horizontalDown if it is running but how?
                Rightscale.verticalUp(Rightscale.svgEl)
            } else if ([1, 2].indexOf(Rightscale.identifier)>-1) {
                // Here I want to stop Rightscale.verticalUp or Rightscale.verticalDown if it is running, how can I do this?
                Rightscale.horizontalWide(Rightscale.svgEl)
            }
        });
    },
    verticalUp: function($elt) {
        var scaleH = Rightscale.cntH / Rightscale.svgH;
        Rightscale.identifier = 1
        $elt.css('transform', 'scaleY(' + scaleH + ')')
        Rightscale.timerId = setTimeout(function(){
            Rightscale.verticalDown($elt);
        }, 5000);
        //console.log(Rightscale.identifier)
    },
    verticalDown: function($elt) {
        Rightscale.identifier = 2
        $elt.css('transform', 'scaleY(1)')
        Rightscale.timerId = setTimeout(function(){
            Rightscale.verticalUp($elt);
        }, 5000);
        //console.log(Rightscale.identifier)
    },
    horizontalWide: function($elt) {
        Rightscale.identifier = 3
        var scaleW = Rightscale.cntW / Rightscale.svgW;
        $elt.css('transform', 'scaleX(' + scaleW + ')')
        Rightscale.timerId = setTimeout(function(){
            Rightscale.horizontalSmall($elt);
        }, 5000);
        //console.log(Rightscale.identifier)
    },
    horizontalSmall: function($elt) {
        Rightscale.identifier = 4
        $elt.css('transform', 'scaleX(1)')
        Rightscale.timerId = setTimeout(function(){
            Rightscale.horizontalWide($elt);
        }, 5000);
        //console.log(Rightscale.identifier)
    }
}

Rightscale.init();

#right {
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

.scale {
    font-size: 0px;
    width: 20%;
}

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"
         style="enable-background:new 0 0 0 100;" 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>

​