Question

我需要运行一个函数来重新定位滑块。

这必须在调整窗口大小或更改设备方向时发生。它不会触发两次，因为它会引起各种问题。

我遇到的问题是以下代码调整大小和方向都会在方向改变时触发，因此我需要一种方法来检测其中一个而不使用另一个，但是我不确定如何真正解决问题。

function cssliderOrientation(trigger){

        setTimeout(function() {
        
        $( "<p>" + trigger + "</p>" ).appendTo( ".container" );
        
        }, 1000);
}

$( window ).on( "orientationchange", function() {
        cssliderOrientation('orientationChange');
    });
    
    $(window).resize(function() {
        cssliderOrientation('Resize');
    });

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

Answer 1

当两个语句都为true时，将发生两次函数触发。

您更改方向。
事件“ orientationchange”被触发。
事件“调整大小”被触发

方向更改会导致屏幕已经调整大小，因此会触发事件。因此在这种情况下可以忽略第一个事件。

Answer 2

您可以使用变量来检查该函数是否已被调用。如果它具有cssliderOrientation函数调用将返回。在调用超时函数之后，您只需将变量设置回false。

var onSliderOrientation = false;
function cssliderOrientation(trigger){
       if(onSliderOrientation){
           return;
       }

       onSliderOrientation = true;

       setTimeout(function() {

          $( "<p>" + trigger + "</p>" ).appendTo( ".container" );
          onSliderOrientation = false;

        }, 1000);
}

$( window ).on( "orientationchange", function() {
        cssliderOrientation('orientationChange');
    });

    $(window).resize(function() {
        cssliderOrientation('Resize');
    });

与此有关的问题是第二次调用cssliderOrientation，如果该调用在第一个调用的超时时间过后发生，它将被两种方式调用两次。对于您而言，这可能不是问题，但请注意，我不是这种解决方案的忠实拥护者。

jQuery-运行窗口调整大小或方向更改。

2 个答案: