过渡时重叠元素的 setInterval 函数，答案

【问题标题】：setInterval function for elements overlapping while transitioning,过渡时重叠元素的 setInterval 函数，
【发布时间】：2019-03-14 06:39:51
【问题描述】：

我想优化。使用 setInterval 检查蓝色/绿色是否重叠，如果它们确实发送低于绿色的蓝色，直到它们不再相交。然而，很多时候它们并没有相交，而是可能彼此更远或更近，但没有完全达到重叠。当绿色/蓝色将重叠而不是当它们不重叠时，有什么方法可以检查重叠，以及任何其他可以更简单的方法？此外，我对这种方法的使用没有像这个例子那样使用反向相关的变量，因此像 (if rand>50%) 这样的解决方案将无济于事。谢谢！

var green = document.getElementById('green');
var blue = document.getElementById('blue');
        
function myFunct1() {
    var array = ['10%','20%','30%','40%','50%','60%','70%','80%']  
    var rand = array[Math.floor(Math.random()*array.length)];
    green.style.left = rand;
    blue.style.right = rand;
    var inter = setInterval(overlay, 50);
    setTimeout(function( ) { clearInterval( inter ); }, 1500);
}

function overlay() {
    var greenRect = green.getBoundingClientRect();
    var blueRect = blue.getBoundingClientRect();
    var overlap = !(greenRect.right < blueRect.left || greenRect.left > blueRect.right)
            
    if (overlap == true) {
        blue.style.top = '20px';  
    }
    else {
        blue.style.top = 'auto';
    }
}

#container {
   position: relative;
   width: 90%;
   height: 40px;
   margin: auto;
   border: 1px solid black;
 }

#green {
  position: absolute;
  width: 50px;
  height: 20px;
  left: 10px;
  background-color: green;
  transition: 1500ms;
 }
        
#blue {
  position: absolute;
  width: 50px;
  height:20px;
  right: 10px;
  background-color: blue;
  transition: 1500ms;
}

<div id = 'container'>
    <div id = 'green'></div>
    <div id = 'blue'></div>
</div>
        
<button onclick = 'myFunct1()'>FUNCTION 1</button>

【问题讨论】：

我还是不明白你的问题。
问题是即使元素从不重叠，setInterval 函数也会运行。我希望它只在它们重叠的时候运行。
问题是，你如何确定？轨道的大小在 CSS 中定义并且可能会改变，位置以 % 定义，因此取决于轨道的大小，旋钮的尺寸在 CSS 中定义，并且可能会改变动画，特别是使用的缓动函数也在 CSS 中定义。总而言之，有很多事情可能会影响这两个旋钮是否相交。在这些假设下，JS 唯一能做的就是向浏览器询问旋钮的当前大小和位置，并在那个时刻进行比较。

标签： javascript function methods setinterval overlap

【解决方案1】：

添加一些重叠容差如何，

我只添加了两个框之一，但当然，您可以拆分重叠部分并将它们应用于两个框

function overlay() {
    var overlappingTolerance = 10
    var greenRect = green.getBoundingClientRect();
    var blueRect = blue.getBoundingClientRect();
    var overlap = !(
                       ( greenRect.right - overlappingTolerance)  < blueRect.left ||
                       ( greenRect.left - overlappingTolerance) > blueRect.right
                   );

    if (overlap == true) {
        blue.style.top = '20px';  
    }
    else {
        blue.style.top = 'auto';
    }
}

【讨论】：