jquery滚动监听滚动一次触发多次事件，怎么解决？

Question

用JQuery写滚动监听懒加载，滚轮滚动一次触发多次事件

var x = 1;
var winH = $(window).height();//页面的高度
$(window).on("scroll",function(){
      clearTimeout(timer);
      scrollTop = $(window).scrollTop(),//滚动条距离顶部的距离
      offSetTop = $(".container>.fl>.box:last").offset().top;//在页面中的位置
      //console.log(offSetTop < (winH + scrollTop));
      if(isVisible(".container>.fl>.box:last"))
      {
         x=++x;
         var ddiv = `<div class = "box"> ${x} </div>`;
         var timer = setTimeout(function () {
            $(".container>.fl").append(ddiv);
            console.log("出现在视野里");
         }, 1000);
      }
})

function isVisible(el){
    if ($(el).offset().top <(winH + scrollTop))
    return true;
}

写了setTimeout还是会出现这个问题 是不是我鼠标滚轮问题？

Answer 1

滚轮滚动是会触发多次scroll事件的
可用函数节流的方法，你的思路已经是对了，但是写的有问题
要把timer声明在外面：

var x = 1;
var winH = $(window).height();//页面的高度
var timer = null
$(window).on("scroll",function(){
      clearTimeout(timer);
      scrollTop = $(window).scrollTop(),//滚动条距离顶部的距离
      offSetTop = $(".container>.fl>.box:last").offset().top;//在页面中的位置
      //console.log(offSetTop < (winH + scrollTop));
      if(isVisible(".container>.fl>.box:last"))
      {
         x=++x;
         var ddiv = `<div class = "box"> ${x} </div>`;
         timer = setTimeout(function () {
            $(".container>.fl").append(ddiv);
            console.log("出现在视野里");
         }, 1000);
      }
})

function isVisible(el){
    if ($(el).offset().top <(winH + scrollTop))
    return true;
}

你可以在搜索 函数节流 看看更多介绍

Answer 2

你可以搜scroll性能优化，可以参考一下

Answer 3

    throttle(method, arg) {
      if (this.throttleId) {
        return;
      }
      method(arg);
      this.throttleId = setTimeout(() => {
        this.throttleId = undefined;
      }, this.delay);
    },

函数节流的话
正好手头有写一个 vue里的
但原理都差不多