Jqueryで長いプロセスを実行する前後の要素のCSSを変更します

Question

問題がありますが、javacriptではかなり一般的だと思いますが、何を検索するのかわかりません。

JSfeedle相当：私はonclickの、そしていくつかのコードを実行し、元のものに色を設定する矢印の色を変更したいソリューションのおかげ@Joe https://jsfiddle.net/Draykoon/55jzr2uq/20/

とhttps://jsfiddle.net/Draykoon/55jzr2uq/19/ feedle。

私は例としてsleepを使用しますが、それは時間がかかりますが、どれくらいの数がわからないかの機能です。 このコードを考えてみます。＃FF9900の色が画面に表示されていない

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

私は＃8BBE22に色をリセットしていないとき、それはこのコード行をスキップして悪化しているているように、変更は後にのみ表示されます"sleep（1）"を呼び出すと、ユーザーに通知する必要があります。私は、私は同じ結果を得た $("div.tab-pane:nth-child(" +(id+1).toString() + ")" + " i.fa-chevron-circle-left") を試してみてください 、 $($("div.tab-pane")[id]).find("i.fa-chevron-circle-left")は適切ではありません知っている

$('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 
    }); 

、色がなく、遅延を変更。

私はJavaScriptの重要な振る舞いが見当たりません。他の関数の呼び出しに置き換えるべきである

睡眠は、私は、実行時（実際にグラフを再描画）事前に

感謝を知りません。

Answer 1

あなたは、関数を呼び出したり、指定遅延後にコードスニペットを実行

setTimeout

を使用してそれを達成することができます。それはあなたのスクリプトが同期しているようDOMへの変更は、適用される前に全体だでスクリプトを実行するため

$('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

です。基本的には、最初の色を別のスレッドで2番目の色を設定するコードに設定するコードが必要です。そうでない場合は、同時に適用されます。

これを達成するために、@ SetpalはsetTimeoutを使用できることに注意しました。コードで

は

更新

私は関数を呼び出すと、それはそうのように変更するには、矢印かを知っているので、IDを渡す

$('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

@ Setpalのコードの修正版：

$('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"); 
}