Javascript jQuery函数调用不工作

我正在尝试在

中添加和删除一个类，但removeClass在调用函数时不起作用

setInterval(changeClass,4000);

var spanId=1;

function changeClass(){
 $('#'+spanId).addClass("hilite");
 setTimeout(remove, 1000);
 spanId++;}  

function remove(){
 $('#'+spanId).removeClass("hilite");
  return true;
  }

有人能说出原因吗

我怎么能用一个像这样的while循环呢？我尝试了所有的方法，但都没有成功

var spanSet=4;
var spanId=1;
while(spanSet > 0)
{
changeClass();
spanSet--;
}

function changeClass(){
$('#'+spanId).addClass("hilite");
setTimeout(remove, 3000);
}

function remove(){
$('#'+spanId).removeClass("hilite");
spanId++;
return true;
}

---

spanId

将在超时结束前递增，因此您试图从下一项而不是最后一项中删除该类

通常避免此问题的方法是使用闭包，但在这种情况下，移动

spanId++

至

删除

功能的末尾

闭包方法（在本例中，我不建议使用闭包方法，因为与仅移动增量相比，闭包方法过于复杂）可能如下所示：

setInterval(changeClass, 4000);
var spanId = 1;

function changeClass() {
    $('#' + spanId).addClass("hilite");
    setTimeout(
        remove(spanId), // CALL remove and pass spanId as an argument
        1000
    );
    spanId++;
}

function remove(spanId) {
    return function () { // RETURN a function from remove().
        // Note: This spanId is the local variable defined in the argument list
        //       not the one that exists in the wider scope
        $('#' + spanId).removeClass("hilite");
        return true;
    }
}

function changeClass(){
 $('#'+spanId).addClass("hilite");
 setTimeout(remove, 1000);
}  

function remove(){
  $('#'+spanId).removeClass("hilite");
  spanId++;
  return true;
}

---

spanId

将在超时结束前递增，因此您试图从下一项而不是最后一项中删除该类

通常避免此问题的方法是使用闭包，但在这种情况下，移动

spanId++

至

删除

功能的末尾

闭包方法（在本例中，我不建议使用闭包方法，因为与仅移动增量相比，闭包方法过于复杂）可能如下所示：

setInterval(changeClass, 4000);
var spanId = 1;

function changeClass() {
    $('#' + spanId).addClass("hilite");
    setTimeout(
        remove(spanId), // CALL remove and pass spanId as an argument
        1000
    );
    spanId++;
}

function remove(spanId) {
    return function () { // RETURN a function from remove().
        // Note: This spanId is the local variable defined in the argument list
        //       not the one that exists in the wider scope
        $('#' + spanId).removeClass("hilite");
        return true;
    }
}

function changeClass(){
 $('#'+spanId).addClass("hilite");
 setTimeout(remove, 1000);
}  

function remove(){
  $('#'+spanId).removeClass("hilite");
  spanId++;
  return true;
}

---

你应该这样说：

setInterval(changeClass, 4000);
var spanId = 1;

function changeClass() {
    $('#'+spanId).addClass("hilite");
    setTimeout(remove, 1000);
}  

function remove() {
    $('#'+spanId).removeClass("hilite");
    spanId++;  // <--
    return true;
}

setInterval（changeClass，4000）；
var spanId=1；
函数changeClass（）{
$（'#'+spanId）.addClass（“hilite”）；
设置超时（删除，1000）；
}  
函数删除（）{
$（'#'+spanId）.removeClass（“hilite”）；
spanId++；//您应该这样说：

setInterval(changeClass, 4000);
var spanId = 1;

function changeClass() {
    $('#'+spanId).addClass("hilite");
    setTimeout(remove, 1000);
}  

function remove() {
    $('#'+spanId).removeClass("hilite");
    spanId++;  // <--
    return true;
}

setInterval（changeClass，4000）；
var spanId=1；
函数changeClass（）{
$（'#'+spanId）.addClass（“hilite”）；
设置超时（删除，1000）；
}  
函数删除（）{
$（'#'+spanId）.removeClass（“hilite”）；
spanId++；//
在这段代码中，您应该在回调函数中执行
spanId++
，该函数作为参数传递给setTimeout，因为JS在完成setTimeout语句之前不会停止执行

因此，您的代码应该如下所示：

setInterval(changeClass, 4000);
var spanId = 1;

function changeClass() {
    $('#' + spanId).addClass("hilite");
    setTimeout(
        remove(spanId), // CALL remove and pass spanId as an argument
        1000
    );
    spanId++;
}

function remove(spanId) {
    return function () { // RETURN a function from remove().
        // Note: This spanId is the local variable defined in the argument list
        //       not the one that exists in the wider scope
        $('#' + spanId).removeClass("hilite");
        return true;
    }
}

function changeClass(){
 $('#'+spanId).addClass("hilite");
 setTimeout(remove, 1000);
}  

function remove(){
  $('#'+spanId).removeClass("hilite");
  spanId++;
  return true;
}

在这段代码中，您应该在回调函数中执行
spanId++
，该函数作为参数传递给setTimeout，因为JS在完成setTimeout语句之前不会停止执行

因此，您的代码应该如下所示：

setInterval(changeClass, 4000);
var spanId = 1;

function changeClass() {
    $('#' + spanId).addClass("hilite");
    setTimeout(
        remove(spanId), // CALL remove and pass spanId as an argument
        1000
    );
    spanId++;
}

function remove(spanId) {
    return function () { // RETURN a function from remove().
        // Note: This spanId is the local variable defined in the argument list
        //       not the one that exists in the wider scope
        $('#' + spanId).removeClass("hilite");
        return true;
    }
}

function changeClass(){
 $('#'+spanId).addClass("hilite");
 setTimeout(remove, 1000);
}  

function remove(){
  $('#'+spanId).removeClass("hilite");
  spanId++;
  return true;
}

这对我来说很有效，还添加了一些超时控制

changeClass();

function changeClass(){
    $("#container").addClass("box");
    console.log("changeClass()");
    clearTimeout(interval);
    interval = setTimeout(remove, 1000);
}

function remove(){
    $("#container").removeClass("box");
    console.log("remove()");
    clearTimeout(interval);
    interval = setInterval(changeClass,1000);
}

这对我来说很有效，还添加了一些超时控制

changeClass();

function changeClass(){
    $("#container").addClass("box");
    console.log("changeClass()");
    clearTimeout(interval);
    interval = setTimeout(remove, 1000);
}

function remove(){
    $("#container").removeClass("box");
    console.log("remove()");
    clearTimeout(interval);
    interval = setInterval(changeClass,1000);
}

另一个点是差异答案？哦，天哪。但是差异非常可怕。您硬编码了元素的id，因此它将始终在同一个元素上运行（原始代码在不同的元素之间循环），更改了添加类之间的时间间隔，使用clearTimeout清除间隔和超时，并将来自两个不同事物的超时/间隔存储在同一个（全局）中变量-覆盖它们并冒着竞争条件的风险。@Quentin-这是为了说明，而不是为了生产。我想这就是这个地方的运作方式……我希望他们对代码有一定程度的理解，以适应自己的情况。@Darcery-适应代码不应该包括撤销大量未改进的内容。还有一点不同回答？哦，天哪。但是差别非常大。您已经硬编码了元素的id，因此它将始终在同一个元素上运行（原始代码在不同的元素之间循环），更改了添加类之间的时间间隔，使用clearTimeout清除间隔和超时，并将来自两个不同事物的超时/间隔存储在同一个（全局）中变量-覆盖它们并冒着竞争条件的风险。@Quentin-这是为了说明，而不是为了生产。我想这就是这个地方的运作方式……我希望他们对代码有一定程度的理解，以适应自己的情况。@Darcery-适应代码不应该包括撤销一大堆未改进的内容。我非常感激如果你能用闭包法更新你的答案。如果你能用闭包法更新你的答案，我将不胜感激。@RokoC.Buljan:这些天人们都疯了。@RokoC.Buljan:这些天人们都疯了。