js中判斷一個(gè)元素在可視區(qū)域停留2s以上才執(zhí)行相應(yīng)函數(shù)，否則不執(zhí)行 怎么辦呢

學(xué)防抖

//  如何判斷元素是否在可視區(qū)域
  // 方法一 
  function isInSight2(ele) {
      var visibleArea = document.documentElement.clientHeight;//屏幕可視區(qū)域的高度
      var eleTop = ele.offsetTop;//元素相對(duì)于文檔頂部的距離
      var scrollTop = document.documentElement.scrollTop;// 獲取瀏覽器窗口頂部距離文檔頂部的距離（滾動(dòng)條滾動(dòng)的距離）
      return eleTop - scrollTop < visibleArea ? true : false
  }
  // 方法二 https://segmentfault.com/a/1190000010744417
  function isInSight(el) {
      const bound = el.getBoundingClientRect(); // 圖片到頂部可視區(qū)域的高度
      const clientHeight = window.innerHeight;// 可視區(qū)域的高度
      //如果只考慮向下滾動(dòng)加載
      //const clientWidth=window.innerWeight;
      return bound.top <= clientHeight + 100;
  }

估計(jì)你需要一個(gè)標(biāo)志量和一個(gè)定時(shí)器2秒，結(jié)合上面的元素在可視區(qū)判斷，大致邏輯是：

1. 元素進(jìn)入可視，觸發(fā)動(dòng)作，設(shè)置標(biāo)志量，啟動(dòng)定時(shí)器（注意定時(shí)器需要用變量存儲(chǔ)起來，方便后面刪除）
2. 元素退出可視區(qū)，觸發(fā)動(dòng)作，檢測(cè)啟動(dòng)定時(shí)器變量是否為null，如果非則刪除定時(shí)器，設(shè)置變量為null，如果為null則不動(dòng)作（可能前面已經(jīng)執(zhí)行了2秒后動(dòng)作），設(shè)置標(biāo)志量狀態(tài)
3. 定時(shí)器2秒后觸發(fā)，檢測(cè)設(shè)置標(biāo)志量，設(shè)置定時(shí)器變量為null，進(jìn)行相應(yīng)處理，在結(jié)束時(shí)刪除定時(shí)器