Question

我可以设置间隔并在点击时清除它。我想再次setInterval但不知道该怎么做。我想要的是当有人点击一个图标时，setInterval应该是清除的（如果它等待几秒钟，则最好），然后重新开始。这是我的代码

jQuery(document).ready(function() {


    var timer =  setInterval(function(){
    var finding = jQuery('ul.hi-icon-wrap').find( "li.active" );
    var tabcontentActive = jQuery('div.tab-content').find( "div.active" );
    var last = jQuery('ul.hi-icon-wrap li').last();
    var nextItem =  jQuery(finding).next();
    var tabid = jQuery(nextItem).find('a').attr('id');
    if(finding.is(last)) {
     var tabid = jQuery('ul.hi-icon-wrap li:first').find('a').attr('id');   
    }
    //alert(tabid);
     jQuery(finding).removeClass('active');
     jQuery(finding).next().addClass('active');
     if(finding.is(last)) {
        jQuery('ul.hi-icon-wrap li:first').addClass('active');
    }
    jQuery(tabcontentActive).removeClass('active');
    jQuery('div.tab-content').find('div#'+tabid).addClass('active');
    }, 3000);
     $("ul.hi-icon-wrap li").click(function () {
          //alert('ok');
          clearInterval(timer); //clear interval
        timer = setInterval(timer, 300); //I am unable to restart here. 
      });

});

Answer 1

setInterval / setTimeout只返回指示进程引用的数字，而不是实际调用的函数。再次调用相同的功能。

var fooFunction = function(){
    var finding = jQuery('ul.hi-icon-wrap').find( "li.active" );
    var tabcontentActive = jQuery('div.tab-content').find( "div.active" );
    ...
}

jQuery(document).ready(function() {
     var timer =  setInterval(fooFunction, 3000);

     $("ul.hi-icon-wrap li").click(function () {
        clearInterval(timer); //clear interval
        timer = setInterval(fooFunction, 300); //I am unable to restart here. 
     });
});

Answer 2

你能做什么把这段代码放在你的功能中，如下所示。您正在调用clearInterval来清除问题，如果要再次重新启动它，则必须设置新的间隔。

WindowOrWorkerGlobalScope mixin的clearInterval()方法取消之前建立的定时重复动作调用setInterval（）。

function interval(){
    var finding = jQuery('ul.hi-icon-wrap').find( "li.active" );
    var tabcontentActive = jQuery('div.tab-content').find( "div.active" );
    var last = jQuery('ul.hi-icon-wrap li').last();
    var nextItem =  jQuery(finding).next();
    var tabid = jQuery(nextItem).find('a').attr('id');
    if(finding.is(last)) {
    var tabid = jQuery('ul.hi-icon-wrap li:first').find('a').attr('id');   
}
    jQuery(finding).removeClass('active');
    jQuery(finding).next().addClass('active');
    if(finding.is(last)) {
        jQuery('ul.hi-icon-wrap li:first').addClass('active');
    }
    jQuery(tabcontentActive).removeClass('active');
    jQuery('div.tab-content').find('div#'+tabid).addClass('active');
}

然后

jQuery(document).ready(function() {
    var timer = setInterval(interval,3000);
    // do nothing 
    $("ul.hi-icon-wrap li").click(function () {
        clearInterval(timer); //clear interval
        timer = setInterval(interval, 300);
      });
}

Answer 3

在不同的函数中添加setInterval逻辑，并在单击按钮时调用该函数。

＆＃13;

jQuery(document).ready(function() {


    var timer;
    startInterval();
    
    function startInterval(){
    timer =  setInterval(function(){
    var finding = jQuery('ul.hi-icon-wrap').find( "li.active" );
    var tabcontentActive = jQuery('div.tab-content').find( "div.active" );
    var last = jQuery('ul.hi-icon-wrap li').last();
    var nextItem =  jQuery(finding).next();
    var tabid = jQuery(nextItem).find('a').attr('id');
    if(finding.is(last)) {
     var tabid = jQuery('ul.hi-icon-wrap li:first').find('a').attr('id');   
    }
    //alert(tabid);
     jQuery(finding).removeClass('active');
     jQuery(finding).next().addClass('active');
     if(finding.is(last)) {
        jQuery('ul.hi-icon-wrap li:first').addClass('active');
    }
    jQuery(tabcontentActive).removeClass('active');
    jQuery('div.tab-content').find('div#'+tabid).addClass('active');
    }, 3000);
  }
  
  $("ul.hi-icon-wrap li").click(function () {
          //alert('ok');
          clearInterval(timer); //clear interval
        startInterval(); //I am unable to restart here. 
    });
      
});

＆＃13;

清除后如何设置间隔

3 个答案: