Question

我有一个文本fadeIn / fadeOut脚本，点击后会显示一个指定的图像，持续使用setTimeout定义的秒数。

我想创建一个取消按钮，以便在我不想在整个设定时间内看到该图像时。

我尝试将一个clearTimeout函数添加到class =“cancel”并将其指向a但无法使其正常工作...

我的HTML：

<div id="help">
<p class="helper" data-timeout-value="5000" id="1">Do you...?</p>
<p class="helper" data-timeout-value="7000" id="2">Do you still...?</p>
<p class="helper" data-timeout-value="8000" id="3">Do you really still...?</p>
</div>

<div id="image1"></div>
<div id="image2"></div>
<div id="image3"></div>

脚本

var myTime;
$(".helper").click(function(){
   var $this = $(this),
       $id = $this.attr('id'),
       $timeout = $this.attr('data-timeout-value');

   $("#help").fadeOut(500);
   $("#image"+$id).fadeIn(500);

   myTime = setTimeout(function() {
      $('#image'+$id).fadeOut(500);
      $("#help").fadeIn(500);
   }, $timeout);
})

$('div.cancel').click(function(){
        clearTimeout(myTime);

});

Answer 1

您似乎使事情变得复杂，只需使用jQuery的动画和延迟，并在点击取消按钮时停止它们

var helper = $(".helper");
var helperIndex = -1;

(function showNextHelp() {
    ++helperIndex;
    helper.eq(helperIndex % helper.length)
          .fadeIn(500)
          .delay(1000)
          .fadeOut(500, showNextHelp);
})();

helper.on('click', function(){
   $("#help").fadeOut(500);
   $("#image" + this.id).addClass('active')
                        .fadeIn(500)
                        .delay($(this).data('timeout-value'))
                        .queue(function(next) {
                            $(this).fadeOut(500, function() {
                                $(this).removeClass('active');
                            });
                            $("#help").fadeIn(500);
                            next();
                        });
});

$('.cancel').click(function(){
    $('.active').stop(true, true).hide(); // use fadeOut / In for animations
    $("#help").stop(true, true).show();
});

FIDDLE

Answer 2

像这样修改你的代码：

var id;
var myTime;
$(".helper").click(function(){
    var $this = $(this);
    id = $this.attr('id');
    $timeout = $this.attr('data-timeout-value');
   $("#help").fadeOut(500);
   $("#image"+id).fadeIn(500);

    myTime = setTimeout(function() {
      showHelp(id);
   }, $timeout);
})

function showHelp(){
    $('#image'+id).fadeOut(500);
    $("#help").fadeIn(500);
}

$('div.cancel').click(function(){
    clearTimeout(myTime);
    showHelp();
});

<强> Check JSFiddle Demo

创建一个setTimeout取消按钮

2 个答案: