鍍金池/ 問(wèn)答/HTML/ jquery滾動(dòng)監(jiān)聽(tīng)滾動(dòng)一次觸發(fā)多次事件，怎么解決？

jquery滾動(dòng)監(jiān)聽(tīng)滾動(dòng)一次觸發(fā)多次事件，怎么解決？

用JQuery寫(xiě)滾動(dòng)監(jiān)聽(tīng)?wèi)屑虞d，滾輪滾動(dòng)一次觸發(fā)多次事件

clipboard.png

var x = 1;
var winH = $(window).height();//頁(yè)面的高度
$(window).on("scroll",function(){
      clearTimeout(timer);
      scrollTop = $(window).scrollTop(),//滾動(dòng)條距離頂部的距離
      offSetTop = $(".container>.fl>.box:last").offset().top;//在頁(yè)面中的位置
      //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("出現(xiàn)在視野里");
         }, 1000);
      }
})

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

寫(xiě)了setTimeout還是會(huì)出現(xiàn)這個(gè)問(wèn)題 是不是我鼠標(biāo)滾輪問(wèn)題？

回答
編輯回答
汐顏

你可以搜scroll性能優(yōu)化，可以參考一下

2018年7月8日 04:34
編輯回答
茍活

滾輪滾動(dòng)是會(huì)觸發(fā)多次scroll事件的
可用函數(shù)節(jié)流的方法，你的思路已經(jīng)是對(duì)了，但是寫(xiě)的有問(wèn)題
要把timer聲明在外面：

var x = 1;
var winH = $(window).height();//頁(yè)面的高度
var timer = null
$(window).on("scroll",function(){
      clearTimeout(timer);
      scrollTop = $(window).scrollTop(),//滾動(dòng)條距離頂部的距離
      offSetTop = $(".container>.fl>.box:last").offset().top;//在頁(yè)面中的位置
      //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("出現(xiàn)在視野里");
         }, 1000);
      }
})

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

你可以在搜索 函數(shù)節(jié)流 看看更多介紹

2017年8月21日 17:37
編輯回答
淚染裳
    throttle(method, arg) {
      if (this.throttleId) {
        return;
      }
      method(arg);
      this.throttleId = setTimeout(() => {
        this.throttleId = undefined;
      }, this.delay);
    },

函數(shù)節(jié)流的話
正好手頭有寫(xiě)一個(gè) vue里的
但原理都差不多

2018年8月9日 10:11