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

试试这个

调用jQuery函数两次（两个元素）只处理第二个调用

3 个答案: