每5秒重放一次jQuery函数

Replay jQuery function every 5 seconds

本文关键字：一次 jQuery 函数 5秒      更新时间：2023-09-26

我想重放我的jquery函数ChangeStats()每5秒，它目前正在做什么。

function ChangeStats() {
    $('body').find('.admin-stats-big-figures-hidden').fadeIn(500);
setTimeout(function() {
    $('body').find('.admin-stats-big-figures').fadeOut(500);
}, 500);
}
$(document).ready(function(){
    setInterval(ChangeStats, 5000);
})();

是的，我有正确的类名。不，我没有在我的HTML中使用下划线。

我认为这与我使用"find()"有关，一旦DOM加载并设置函数，是否意味着要向上遍历DOM树而不是向下?

编辑:

已更新的代码，仍然不能工作。

HTML: 

<span class="admin-stats-big-figures">%productCount%</span>
<span class="admin-stats-big-figures-hidden">hey</span>

好吧，我要冒险做几个假设;一种是希望在两个元素之间重复循环，另一种是在窗口上下文中使用$(this)，而不是在包含元素的上下文中使用。如果其中任何一个是不正确的，那么下面的解决方案可能不合适。不过，让我们试一试，好吗?

1)你需要使用setInterval而不是setTimeout来创建一个重复调用。当然，你可以把你的超时"链"起来(即:从当前超时的代码中调用下一个超时)。这在某些情况下有一些好处，但现在让我们假设您将使用间隔而不是超时。

2)您每次都调用find() jQuery方法，这有点不必要，特别是如果您将重复操作，因此一个想法是缓存查找。如果你要这样做，一个自定义对象将比单独的全局变量更合适。

3)在开始和停止动画方面可以提供一些灵活性。如果我们使用(2)中提到的自定义对象，那么它可以很容易地添加。

4)你正在使用fadeIn和fadeOut，但是如果你希望项目循环，那么fadeToggle可能是你最好的解决方案，因为它将简单地允许你做到这一点，切换，而不需要检查元素的当前不透明度状态。

5)最后，在我的例子中，我提供了一点额外的"填充HTML"，以便示例运行时看起来很好。jQuery中的淡出实际上会将淡出项设置为"none"的CSS显示，从而导致本演示中的内容"跳跃"，因此我使用了一些div和几个HTML实体空间来保持格式。

好了，这就是代码…

// your custom animation object
var myAnim = {
  // these will be cached variables used in the animation
  elements : null,
  interval : null,
  // default values for fading and anim delays are set to allow them to be optional
  delay : { fade: 500, anim: 200 },
  // call the init() function in order to set the variables and trigger the animation
  init : function(classNameOne, classNameTwo, fadeDelay, animDelay) {
    this.elements = [$("."+classNameOne),$("."+classNameTwo)];
    // if no fade and animation delays are provided (or if they are 0) the default ones are used
    if (animDelay) this.delay.anim = animDelay;
    if (fadeDelay) this.delay.fade= fadeDelay;
    this.elements[0].fadeOut(function(){myAnim.start()});
  },
  // this is where the actual toggling happens, it uses the fadeToggle callback function to fade in/out one element once the previous fade has completed
  update : function() {
    this.elements[0].fadeToggle(this.delay.anim,function(el,delay){el.fadeToggle(delay)}(this.elements[1],this.delay.anim));
  },
  // the start() method allows you to (re)start the animation
  start : function() {
    if (this.interval) return; // do nothing if the animation is currently running
    this.interval = setInterval(function(){myAnim.update()},this.delay.fade);
  },
  // and as you would expect the stop() stops it.
  stop : function () {
    if (!this.interval) return; // do nothing if the animation had already stopped
    clearInterval(this.interval);
    this.interval = null;
  }
}
// this is the jQuery hook in order to run the animation the moment the document is ready
$(document).ready(
  function(){
    // the first two parameters are the two classnames of the elements
    // the last two parameters are the delay between the animation repeating and the time taken for each animation (fade) to happen. The first one should always be bigger
    myAnim.init("admin-stats-big-figures","admin-stats-big-figures-hidden",500,200);
  }
);

好的，现在我们需要HTML来补充这一点(我说我已经添加了一点格式化):

<div><span class="admin-stats-big-figures">One</span> &nbsp; </div>
<div><span class="admin-stats-big-figures-hidden">Two</span> &nbsp; </div>
<hr/>
<input type="button" value="Start" onclick="myAnim.start()"/> | <input type="button" value="Stop" onclick="myAnim.stop()"/>

我还提供了按钮来停止/启动动画。您可以在这个JSFiddle中看到一个工作示例—尽管停止/开始按钮不工作(可能是JSFiddle特有的)，但它们在上下文中确实可以工作。

这里我要替换$(this)。也许到那时它会起作用……同样使用回调。

 function ChangeStats() {
  $('body').find('.admin-stats-big-figures-hidden').fadeIn(500, function() {
    $('body').find('.admin-stats-big-figures').fadeOut(500);
  });
 }
$(document).ready(function(){
     setTimeout('ChangeStats()', 5000);
});
相关文章：