在使用Jquery长时间执行之前和之后更改元素的CSS

Question

我有一个问题，我认为这在javacript上很普遍，但无法弄清楚要搜索什么。

等效于JSfeedle： https: //jsfiddle.net/Draykoon/55jzr2uq/19/带有解决方案的feedle感谢@Joe https://jsfiddle.net/Draykoon/55jzr2uq/20/

我想在onc​​lick时更改箭头的颜色，然后执行一些代码并将颜色设置回原始颜色。

我以睡眠为例，但这是一个需要花费时间但不知道多少的函数。 考虑以下代码：

function sleep(seconds) 
{
    var e = new Date().getTime() + (seconds * 1000);
    while (new Date().getTime() <= e) {}
}

$('i.fa-chevron-circle-left').click(function(){
    var id = $(this).attr("id");
        $($("div.tab-pane")[id]).find("i.fa-chevron-circle-left").css("color","#ff9900");
        sleep(1);
        $($("div.tab-pane")[id]).find("i.fa-chevron-circle-left").css("color","#8BBE22");
});

＃ff9900颜色未显示在屏幕上，这就像跳过了这行代码，更糟糕的是，当我不将颜色重置为＃8BBE22时，更改仅在调用“ sleep（1）”之后出现，我想要通知用户。

$('i.fa-chevron-circle-left').click(function(){
        var id = $(this).attr("id");
            $($("div.tab-pane")[id]).find("i.fa-chevron-circle-left").css("color","#ff9900");
            sleep(1);
            //color showing after 1 sec
    });

我知道$($("div.tab-pane")[id]).find("i.fa-chevron-circle-left")不正确，我尝试$("div.tab-pane:nth-child(" +(id+1).toString() + ")" + " i.fa-chevron-circle-left" )我得到了相同的结果，颜色改变了，但有延迟。

我认为我缺少javascript的重要行为。

睡眠应替换为对其他函数的调用，我不知道执行时间（现实中重绘图形）

提前致谢。

Answer 1

您可以使用setTimeout实现

在指定的延迟后调用函数或执行代码段。

$('i.fa-chevron-circle-left').click(function(){
    var self = $(this);
    self.css("color","#ff9900");
    //Add your code, which you want to execute

    //Reset color after 1 second
    setTimeout(function(){
        self.css("color","#8BBE22");
    },  1000)
});

Answer 2

这是因为脚本是同步的，因此在应用对DOM的更改之前，脚本将全部运行。 基本上，您需要将用于设置初始颜色的代码设置在用于设置第二种颜色的代码的单独线程上，否则它们将被同时应用。

要实现这一点，正如@Setpal所指出的，您可以使用setTimeout。

用代码更新

@Setpal代码的修改版本

$('i.fa-chevron-circle-left').click(function(){
    var self = $(this);
    self.css("color","#ff9900");

    setTimeout(function(){
        //Add your code, which you want to execute
        self.css("color","#8BBE22");
    }, 0)
});

Answer 3

我将调用一个函数并传递ID，以便它知道要更改的箭头，如下所示：

$('i.fa-chevron-circle-left').click(function(){
  var $this = $(this);
  var id = $this.attr("id");
  $this.css("color","#ff9900");
  myFunction(id);
});

myFunction(id) {
  // do something
  $("#" + id).css("color","#8BBE22");
}