Question

我具有以下2个功能：

  function showMessage(){
    $('#myBox').animate({
    opacity: 'show',
    top:0,
    },1200)
}

function hideMessage(){
    $('#myBox').animate({
    opacity: 'hide',
    top: -200,
    },1200)
}

如果我将它们分配给按钮，它们都可以正常工作。

我想做的是每分钟（例如）执行一次showMessage函数，然后在showMessage函数执行10秒后执行showMessage函数。

有人可以协助吗？

我对setInterval和setTimeouts感到困惑。

此致

jmcall10

Answer 1

我认为这个结果就是您所期望的。

  function time() {
    this.time = 'sec';
  }
  function timeCheck(callback) {
    setInterval(() => {
      console.log(this.time)
    }, 1000)
    callback()
  } // Countdown Checker, Don't edit it.

  function show() {
    setInterval(() => {
      $('#myBox').animate({
        opacity: 'hide',
        top: -200
      }, 1200)
      console.log('show fx')
      setTimeout(() => {
        $('#myBox').animate({
          opacity: 'show',
          top: 0
        }, 1200)
      }, 1000)
    }, 10000)
  }

  timeCheck(time)
  show()

* {
  margin: 0 auto;
  color: white;
}
div {
  background-color: darkgreen;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: fixed;
  display: flex;
  flex-flow: column;
  justify-content: center;
  text-align: center;
}

<div id="myBox">
  This div will be gone after 10 seconds, Timed out 1 second and shows again to 1.2 seconds speed.
</div>

<script src="http://code.jquery.com/jquery-3.3.1.js"></script>

Answer 2

另一种可能的方式是使用2 setTimeout时间播放：60秒和10秒（隐藏和放映时间）将放映过渡委托给CSS。

这是代码（在本演示中，我将waitingTime的时间更改为10s，将showtime的时间更改为4s，只是为了您不必等待太久才能看到代码起作用，但是您可以根据需要更改这些时间）：

file1.txt

foo-tool view file1.txt | awk 'NR==FNR { a[$1,$6,$7] = $0; next }($1,$6,$7) in a { print a[$1,$6,$7], $3, $4 }' ARG[$1] file2.txt

var waitingTime = 10000,
    showTime    = 4000,  
    i           = true;

var showMessage = function(){
    $(".myBox").toggleClass("show")
    setTimeout(showMessage, (i) ? showTime : waitingTime);
    i = !i;
};

setTimeout(showMessage, waitingTime);

Answer 3

我建议您应该考虑使用CSS动画，而不是使用jQuery-或任何其他JavaScript。尽管基于百分比的关键帧可能有点不精确：

#mybox {
  /* taking the element out of the document flow: */
  position: absolute;
  /* positioning the element on-screen to start: */
  top: 0.5em;
  /* this is the shorthand, and equivalent to:
  animation-duration: 60s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-name: notificationPopup; */
  animation: 60s linear 0s infinite notificationPopup;
}

@keyframes notificationPopup {
  /* the animation can modify multiple properties,
     but since the only property we need to modify
     in order to have it appear/disappear is the
     'transform' property, that's all we change: */
  0% {
    /* the first keyframe, we maintain the position: */
    transform: translateY(0);
  }
  16.3% {
    /* 16.6% is about ten seconds of the 60s (60 seconds/1 minute),
       here we ensure the animation between visible and hidden doesn't
       occur too soon by creating another keyframe 0.3 seconds
       beforehand: */
    transform: translateY(0);
  }
  16.6% {
    /* here, at approximately the ten-second mark, we create a keyframe
       that hides the element (moving it out of the viewport): */
    transform: translateY(-120%);
  }
  99.7% {
    /* because we show the element at 0%, we again create a keyframe
       0.3s before that point, to prevent premature movement: */
    transform: translateY(-120%);
  }
}

@import url('https://fonts.googleapis.com/css?family=Roboto');
*,
::before,
::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  font-size: 1rem;
  color: #000;
  font-family: Roboto, Calibri, Helvetica, Arial, sans-serif;
}

#mybox {
  position: absolute;
  top: 0.5em;
  left: 10vw;
  width: 80vw;
  border: 2px solid limegreen;
  padding: 0.5em;
  border-radius: 1em;
  background-color: #fff;
  box-shadow: 0 0 15px 5px #666;
  animation: 60s linear 0s infinite notificationPopup;
}

@keyframes notificationPopup {
  0% {
    transform: translateY(0);
  }
  16.3% {
    transform: translateY(0);
  }
  16.6% {
    transform: translateY(-120%);
  }
  99.7% {
    transform: translateY(-120%);
  }
}

<div id="mybox">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum, tempora esse laudantium officiis rerum! Quas enim, ratione, repellendus est natus doloribus rerum, maiores harum nisi modi cupiditate, a? Pariatur, quam.</div>
<section>
  <h1>Page title</h1>
  <p>section content</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci accusantium, sint veritatis nulla odit perspiciatis quos, distinctio maxime deleniti. Distinctio, aut officia, ad dolorum consequatur neque nemo! Quas, tempore sapiente.</p>
</section>

JS Fiddle demo。

参考文献：

jQuery定时div动画

3 个答案: