Question

我有一个jQuery代码，应该在一段时间后更改图像并且运行良好，但是一旦代码结束它就会立即停止。我该如何让它一次又一次地运行？我尝试使用javascript＆＃34; if＆＃34;循环，但它没有做任何事情......或者我做错了？

（w4s和w5s是img的ID）

此外，我对jQuery还很陌生，所以如果您对我所犯的任何错误有任何意见，我很高兴听到它们！

这是代码

$(function () { 
    $("#w4s").hide();
    $("#w5s").hide();
    $(document).ready(function () {
        $(function () {
            $("#w3s").delay("4000").fadeOut("slow", function () {
                $("#w4s").fadeIn("slow",function () {
                    $(this).delay("4000").fadeOut("slow",function () {
                        $("#w5s").fadeIn("slow");
                    }); 
                });
             });
         });
    });    
});

Answer 1

我想你需要这样的东西

window.setInterval(function() {
  alert('I happen every 8 seconds');
   }, 8000);

Answer 2

首先：

$(document).ready(function() {...

相当于

$(function() {...

所以保留后者并放弃使用前者。

其次，了解这个调用实际上做了什么：它告诉jQuery在DOM准备就绪后触发回调（function() {...）。因此，您通常只需要对所有代码单独调用此模式（除非您需要不同的范围）。

因此，在最外层的范围内启动这样的代码：

<script type="text/javascript">
  $(function() {
    // Your code goes here !!!
  });
</script>

现在，由于我们已经涵盖了基础知识，让我们来解决您的问题。

  $(function(){
    var looplength = 8000;
    // You can combine selectors!!!
    $("#w4s, #w5s").hide();

    // Let's drop all these nested `domready` callbacks and
    // in their stead set up an interval
    window.setInterval(function() {
      $("#w3s").delay("4000").fadeOut("slow", function(){
        $("#w4s").fadeIn("slow",function(){
          $(this).delay("4000").fadeOut("slow",function(){
            $("#w5s").fadeIn("slow");
          }); 
        });
      });
   }, looplength);
 });

Answer 3

我会使用超时 - 它可能仅仅是个人偏好，但我发现它们比间隔更有效，并且它让我可以更好地控制循环的延续。

这样的事情可以做到：

//store the timer in your outer scope
var timer = null;

//create an empty elements var in your outer scope for use later
var elements;

//create a loop function do do most of your work for you
function loop(duration, index){

    //set the defaults if none are passed in
    duration = typeof duration == "number" ? duration : 8000;
    index = typeof index == "number" ? index : 0;

    //your function made a bit more generic
    //by selecting from the store elements list
    $(elements[index]).fadeOut("slow", function(){

        //Increase the index by 1 to select the next element,
        //or reset to 0 if it is greater than the number of elements you have
        index = index + 1 < elements.length ? index + 1 : 0;

        $(elements[index]).fadeIn("slow");
    });

    //clear the timeout in case it hasn't been called already
    clearTimeout(timer);

    //set the timeout function to call this function again
    // passing it back the index and duration
    timer = setTimeout(function() {
        loop(duration, index)
    }, duration);
};

//Instantiate the loop function for the first time on document.ready
//It should continue on its own after that
$(document).ready(function() {
    //set the elements after the DOM is loaded
    elements = $("#w3s, #w4s, #w5s");
    loop(4000);
});

希望这会有所帮助。它是一种相当强大的方法，因此您可以在其他地方重用此功能。如果您需要在任何时候取消循环，则将其存储为timer，这样只要您在同一范围内，就可以调用clearTimeout('timer')。

这里提供小提琴 - https://jsfiddle.net/heuw8dt0/2/

修改在DOM就绪函数中移动了元素选择

如何循环jQuery代码？

3 个答案: