Javascript - 三元运算符 - 比较相同的函数两次？

Question

我有 3 个变量 top、mid、bot，我想根据 div 弹出的部分(如果 div< 的最顶部部分)来记录它们，然后 top 将被记录)

您需要知道的是，当用户从页面顶部向下滚动时，我们要定位某些 div。这 3 个变量代表每当我们点击 div 的某个部分时需要记录的内容。

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

编辑

trgt1 和 trgt2 是具有类 (.column) 的 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

您可以使用在滚动页面时运行的脚本。因此，向页面添加一个事件监听器。然后您可以对滚动进行去抖，从而控制窗口上允许的噪音量。我包含的功能是一个有效的去抖功能，只需以毫秒为单位进行等待即可。然后在放入运行代码的 checkSlide() 函数上使用 debounce 函数。

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

祝你好运!

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);
}
}