兩次調用jQuery函數（兩個元素）僅處理第二次調用

Question

我創建了一個函數，並嘗試使用兩個單獨的調用來調用它來修改兩個元素，但是第二個調用是唯一被觸發的。 如果我顛倒了兩個的順序，第二個仍然是唯一處理過的一個。 該功能如下。

它檢查元素是否相互重疊，並相應地更改類。 請參閱窗口滾動功能中的函數調用，以查看兩個調用。

我在這里做錯了什么？

謝謝！

$(function() {

    var checkOverlap = function(element) {
        if($(element).length) {
            var results = $(element).overlaps(".four_img, .full_img, .prod, .image_wide, .media-vimeo-video");

             $(element).removeClass('overlap');
              clearTimeout($.data(this, 'scrollTimer'));

              $.data(this, 'scrollTimer', setTimeout(function() {
                  // do something
                  if (results.length > 0) {
                    //console.log('something is overlapping');
                    $(element).addClass('overlap');
                  }

                  //console.log("Haven't scrolled in 500ms!");
              }, 500));


              //hide for sure if over related proejcts
              var footerOverlap = $(element).overlaps(".related");
              if (footerOverlap.length > 0) {
                //console.log('something is overlapping');
                $(element).addClass('footer-overlap');
              } else {
                $(element).removeClass('footer-overlap');
              }
        }
     }


      //side menu overlay
        $(window).scroll(function() {
            checkOverlap($(".close_share"));
            checkOverlap($('.animate_number'));
        });


  })

Answer 1

嘗試將計時器參考存儲在元素上，

clearTimeout(element.data('scrollTimer'));
element.data('scrollTimer', setTimeout(function() {
    if (results.length > 0) {
        $(element).addClass('overlap');
    }
}, 500));

Answer 2

嘗試更換this與$element

$(function() {

    var checkOverlap = function( $element ) {
        if ( $element.length ) {
            var results = $element.overlaps(".four_img, .full_img, .prod, .image_wide, .media-vimeo-video");

             $element.removeClass('overlap');
              // replace `this` with $element
              //clearTimeout($.data(this, 'scrollTimer'));
              clearTimeout($.data( $element, 'scrollTimer'));

              // replace `this` with $element
              //$.data(this, 'scrollTimer', setTimeout(function() {
              $.data( $element, 'scrollTimer', setTimeout(function() { 
                  // do something
                  if (results.length > 0) {
                    //console.log('something is overlapping');
                    $element.addClass('overlap');
                  }

                  //console.log("Haven't scrolled in 500ms!");
              }, 500));


              //hide for sure if over related proejcts
              var footerOverlap = $element.overlaps(".related");
              if (footerOverlap.length > 0) {
                //console.log('something is overlapping');
                $element.addClass('footer-overlap');
              } else {
                $element.removeClass('footer-overlap');
              }
        }
     }


      //side menu overlay
        $(window).scroll(function() {
            checkOverlap($(".close_share"));
            checkOverlap($('.animate_number'));
        });


  })

Answer 3

$(window).scroll(function() {
            checkOverlap($(".close_share, .animate_number"));
        });

嘗試這個