Question

我有一个问题，我认为它在javacript上很常见，但无法确定要搜索的内容。

JSfeedle等效：https://jsfiddle.net/Draykoon/55jzr2uq/19/ 用解决方案感谢@Joe https://jsfiddle.net/Draykoon/55jzr2uq/20/

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

我以睡眠为例，但它需要时间，但不知道有多少。考虑这段代码：

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时，更改仅在调用＆＃34; sleep（1）＆＃34;，我想要通知用户。

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

使用Jquery在长流程执行之前和之后更改元素的css

3 个答案: