简单的循环 JQuery

Simple Loop JQuery

本文关键字：JQuery 循环 简单      更新时间：2023-09-26

我知道这已经被问了好几次了，但我就是不明白。所以情况是这样的：

$ = jQuery;
    var loop = function() {
    $('#content').delay(800).css('background-color', "#B24296");
    $('#content').delay(1600).css('background-color', "#AEB404");
    $('#content').delay(2400).css('background-color', "#04B404");
    loop();
}
$(document).ready(function() {
    loop();

此设置给了我一个"未捕获的范围错误：超出最大调用堆栈大小"我也试过这个：

var loop = function() {
    $('#content').delay(800).css('background-color', "#B24296", function() {
        $('#content').delay(1600).css('background-color', "#AEB404", function() {
            $('#content').delay(2400).css('background-color', "#04B404");
        });
    });
}
$(document).ready(function() {
    setInterval(loop,3200);

使用此代码，仅发生第一次颜色更改，但其余部分不会发生。所以不幸的是，这些都不能简单地不时更改背景颜色......有谁知道解决方案或可以解释为什么这些不起作用？

编辑：设法让它像这样工作：

function color(t) {
    $("div").delay(t*1).queue(function(n) {
         $('#green').css('background-color', "#B24296");
        n();
    });
    $("div").delay(t*2).queue(function(n) {
         $('#green').css('background-color', "#AEB404");        n();
    });
    $("div").delay(t*3).queue(function(n) {
         $('#green').css('background-color', "#04B404");
        n();
    });
    setTimeout(function() {
       color(500);
    }, 500);
}
color(500);

在第一次尝试中，函数 loop（） 无限次调用自身，导致您报告的错误。

至于为什么 css/delay 组合不起作用，根据这个答案：将 jQuery delay（） 与 css（） delay（） 一起使用适用于动画 fx 队列，对 css（） 调用没有影响。

同样，根据将jQuery delay（）与css（）一起使用中的解决方案，以下是您的用例（http://jsfiddle.net/mmSVF/3/）的工作代码：

var loop = function() {
  $('#content').delay(800).queue(function(next){
      $(this).css('background-color', "#B24296");
      next();
  }).delay(1600).queue(function(next){
      $(this).css('background-color', "#AEB404");
      next();
  }).delay(2400).queue(function(next){
      $(this).css('background-color', "#04B404");
      setTimeout(loop, 500);
      next();
  });
}
$(function(){
    loop(); 
});
相关文章：