在长时间执行过程之前和之后使用Jquery更改元素css

Change element's css before and after long process execution with Jquery

本文关键字：Jquery css 元素 之后 执行 长时间 过程      更新时间：2023-09-26

我有一个问题，我认为这在javascript上很常见，但无法确定要搜索什么。

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，改变只出现在调用"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的一个重要行为。

应该用调用其他函数来代替睡眠，我不知道执行的时间(在现实中重画一个图)

可以使用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)
});

我会调用一个函数并传递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");
}

这是因为在应用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)
});
相关文章：