超时计时问题jquery

Question

我无法直观显示，因此我会尽力解释。我创建了一个每隔几秒钟更改一次的通知，通知中的内容也每次都更改。但是，通知向下滑动并消失时会出现计时问题，因为它会更改内容，因此您可以看到我不想要的内容更改。我希望在通知离开屏幕后更改内容。我已经添加了用于超时的代码。

  function autoupdate() {

    setTimeout(function(){
      $(".notification").slideToggle("slow");
      startNotification();
    }, 1000);
    setTimeout(autoupdate,1000);

  }

  setTimeout(autoupdate,3000);

完整代码：

$(function() {

  function startNotification() {

    var maxTime = 24;
    var minTime = 1;

    var randomNumber = randomNumberFromRange(minTime, maxTime);

    function randomNumberFromRange(min, max) {
      return Math.floor(Math.random() * (max - min + 1) + min);
    }

    function pluralize(word, count) {
      return (count > 1) ? word + 's ' : word + ' ';
    }

    if (randomNumber == 1) {
      $('#time').html(randomNumber + " hour ago");
    } else if (randomNumber == 24) {
      $('#time').html("1 day ago");
    } else {
      $('#time').html(randomNumber + " hours ago");
    }
  };

  function autoupdate() {

    setTimeout(function() {
      $(".custom-social-proof").slideToggle("slow");
      startNotification();
    }, 2000);
    setTimeout(autoupdate, 2000);

  }

  setTimeout(autoupdate, 3000);
});

.custom-social-proof {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 9999999999999 !important;
  display: none;
}

.custom-notification {
  width: 320px;
  border: 0;
  text-align: left;
  z-index: 99999;
  box-sizing: border-box;
  font-weight: 400;
  border-radius: 6px;
  box-shadow: 2px 2px 10px 2px hsla(0, 4%, 4%, 0.2);
  background-color: #fff;
  position: relative;
  cursor: pointer;
}

.custom-notification-container {
  display: flex !important;
  align-items: center;
  height: 80px;
}

.custom-notification-image-wrapper {
  height: 100%;
  margin-right: 10px;
}

.custom-notification-image-wrapper img {
  max-height: 100%;
  overflow: hidden;
  border-radius: 6px 0 0 6px;
  object-fit: cover;
}

.custom-notification-content-wrapper {
  margin: 0;
  height: 100%;
  color: gray;
  padding-left: 20px;
  padding-right: 20px;
  border-radius: 0 6px 6px 0;
  flex: 1;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
}

.custom-notification-content {
  font-family: inherit !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 12px;
}

.custom-notification-content small {
  margin-top: 3px !important;
  display: block !important;
  font-size: 12px !important;
  opacity: .8;
}

#product-title {
  font-size: 14px;
}

.custom-close {
  position: absolute;
  top: 8px;
  right: 8px;
  height: 12px;
  width: 12px;
  cursor: pointer;
  transition: .2s ease-in-out;
  transform: rotate(45deg);
  opacity: 0;
}

.custom-close:before {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background-color: gray;
  position: absolute;
  left: 0;
  top: 5px;
}

.custom-close:after {
  content: "";
  display: block;
  height: 100%;
  width: 2px;
  background-color: gray;
  position: absolute;
  left: 5px;
  top: 0;
}

.custom-close:hover .custom-close {
  opacity: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="custom-social-proof">
  <div class="custom-notification">
    <div class="custom-notification-container">
      <div class="custom-notification-image-wrapper">
        <img id="product-image" src="">
      </div>
      <div class="custom-notification-content-wrapper">
        <p class="custom-notification-content">
          Someone purchased a
          <br>


          <a id="product-title" href=""></a>

          <small><span id="time"></span></small>
        </p>
      </div>
    </div>
    <div class="custom-close"></div>
  </div>
</div>

Answer 1

所有jQuery动画函数都采用在动画完成后运行的回调。因此，请使用startNotification作为回调，而不要立即调用。

  function autoupdate() {

    setTimeout(function(){
      $(".notification").slideToggle("slow", startNotification);
    }, 1000);
    setTimeout(autoupdate,1000);

  }