Javascript -三元运算符-将同一函数比较两次？

Question

我有3个变量top, mid, bot，我希望根据div弹出的部分进行记录(如果是div的最上面部分，则会记录top )

您需要知道的是，当用户从页面顶部向下滚动时，有一些特定的divs是我们想要的目标。这3个变量表示每当我们访问div的某个部分时需要记录的内容。

如何重写console.log三元运算符才有意义，现在，mid根本没有运行。

编辑

带有类(.column)的trgt1 and trgt2是2个div。trgt1是第一个显示的div，当我们在div中间滚动时，应该会弹出trgt2。

代码

function onScroll(event){

let top = "Column with id:`id-10` started to become visible on the page."
let mid = "Column with id:`id-50` is now more than 50% visible on the page."
let bot = "Column with id:`id-40` is now fully visible on the page."

targets.forEach(

    function(trgt,index){

          let isVisible = isScrolledIntoView(trgt);

          if (visibleStates[index] != isVisible)

          console.log(`Element index ${index} is now ${isVisible === trgt1 ? top : (isVisible === trgt2 ? mid : bot)}`);

          visibleStates[index] = isVisible;
        }
    );
}

Answer 1

您可以使用在滚动页面时运行的脚本。因此，向页面添加一个eventlistener。然后，您可以取消滚动，以便控制您在窗口上允许的噪音量。我包含的函数是一个有效的去抖动函数，只需以毫秒为单位进行等待即可。然后在checkSlide()函数上使用您的去反跳函数，您将运行代码放入其中。

我知道这不是一个直接的答案，这是另一种解决问题的方式。这可能行得通。如果你想按你自己的方式去做，那就去做吧。

祝好运!

window.addEventListener('scroll', debounce(checkSlide));

function checkSlide(){}

function debounce(func, wait=20, immediate = true){

var timeout; 

//debounce is a higher order function and will return another function 
return function run_code() {
    var context = this;

    //arguments is local variable of a function, refers to all arguments 
    var args = arguments; 

    //variable later is a function
    var later = function(){
        timeout = null;

        //if it is not time zero, apply checkSlide function 
        if(!immediate) func.apply(context, args);
    };

    var Callnow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if(Callnow) func.apply(context, args);
}
}