在使用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");
}