javascript 10 秒后添加课程

Add class after 10 seconds

提问by wesbos

I have a div where when I click it, it adds a class of 'playing'. Then, after 10 seconds, I want to add a class of 'finished'.

我有一个 div，当我点击它时，它会添加一类“播放”。然后，10 秒后，我想添加一类“完成”。

I have this code, but how do I time it so after 10 seconds, it adds the class of finsihed?

我有这个代码，但我如何在 10 秒后计时，它会添加 finsihed 类？

  $('.albums img').on('click',function(){
    $(this).addClass('playing');
  });

Any help is appreciated!

任何帮助表示赞赏！

---

---

Thanks a ton everyone. I used this question to show ~30 students at HackerYouhow to use stackoverflow to get top notch help from the community.

非常感谢大家。我用这个问题向HackerYou 的大约 30 名学生展示了如何使用 stackoverflow 从社区获得一流的帮助。

回答by PSL

Try using setTimeout specifying 10 seconds delay.

尝试使用 setTimeout 指定 10 秒延迟。

 $('.albums img').on('click',function(){
    var $this = $(this).addClass('playing');
    window.setTimeout(function(){
        $this.addClass('finsihed');
    }, 10000); //<-- Delay in milliseconds
  });

回答by Arun P Johny

You can use .delay()along with .queue()

您可以将.delay()与.queue()一起使用

$('.albums img').on('click', function () {
    $(this).addClass('playing').delay(3000).queue(function () {
        $(this).addClass('finsihed')
    });
});

Demo: Fiddle

演示：小提琴

回答by Austin Brunkhorst

You can use the function setTimeout()to invoke a callback function after 10 seconds.

您可以使用该setTimeout()函数在 10 秒后调用回调函数。

For example.

例如。

var timeout = null;

$('.albums img').on('click', function() {
    var self = this;

    $(self).addClass('playing');

    // clear previous timeout if it exists
    timeout && clearTimeout(timeout);

    // set the timeout
    timeout = setTimeout(function() {
        $(self).addClass('finished');

    // 10 seconds
    }, 10e3);
});