Question

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

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

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

任何帮助表示赞赏！

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

Answer 1

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

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

Answer 2

您可以将.delay()与.queue()

一起使用

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

演示：Fiddle

Answer 3

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

例如。

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

10秒后添加课程

3 个答案: