jQuery removeClass倒计时之后,还是要重新开始

时间:2019-03-25 23:42:33

标签: jquery countdown

单击div时会发生一些事情,并且我也从div中删除了该类,因此如果再次单击div则什么也不会发生。但是,尽管该类已经消失了,但是下次单击也会启动jQuery函数。

我希望单击按钮然后发生:

  • a。 div将在x秒后隐藏
  • b。另一个div将在x之后显示 秒
  • c。倒数计时显示更改发生的时间

那会很好。

如果我首先单击button1,则应该开始倒计时(确实如此)。
如果我再次单击button1,则倒数计时不应再次开始。
(但确实如此-尽管我第一次单击就删除了选择器类)

如何避免倒数再次开始?

$('.button1').click(function() {

  $('.output0').delay(10000).fadeOut(500);
  $('.output1').delay(10500).show(0);

});


$('.button1').click(function() {
  $('.button1').removeClass('button1');
});



(function($) {
  $.fn.countTo = function(options) {
    // merge the default plugin settings with the custom options
    options = $.extend({}, $.fn.countTo.defaults, options || {});

    // how many times to update the value, and how much to increment the value on each update
    var loops = Math.ceil(options.speed / options.refreshInterval),
      increment = (options.to - options.from) / loops;

    return $(this).each(function() {
      var _this = this,
        loopCount = 0,
        value = options.from,
        interval = setInterval(updateTimer, options.refreshInterval);

      function updateTimer() {
        value += increment;
        loopCount++;
        $(_this).html(value.toFixed(options.decimals));

        if (typeof(options.onUpdate) == 'function') {
          options.onUpdate.call(_this, value);
        }

        if (loopCount >= loops) {
          clearInterval(interval);
          value = options.to;

          if (typeof(options.onComplete) == 'function') {
            options.onComplete.call(_this, value);
          }
        }
      }
    });
  };

  $.fn.countTo.defaults = {
    from: 0, // the number the element should start at
    to: 100, // the number the element should end at
    speed: 1000, // how long it should take to count between the target numbers
    refreshInterval: 100, // how often the element should be updated
    decimals: 0, // the number of decimal places to show
    onUpdate: null, // callback method for every time the element is updated,
    onComplete: null, // callback method for when the element finishes updating
  };
})(jQuery);


$('.button1').click(function() {

  jQuery(function($) {
    $('.timer').countTo({
      from: 10,
      to: 0,
      speed: 10000,
      refreshInterval: 50,
      onComplete: function(value) {
        console.debug(this);
      }
    });
  });

});
.button {
  padding: 30px;
  background-color: red;
  width: 200px;
}

.output0 {
  padding: 30px;
  background-color: yellow;
  width: 200px;
}

.output1 {
  padding: 30px;
  background-color: green;
  width: 200px;
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="button1 button" style="">
  Button1 to show something after 10 seconds
</div>

<div class="output0" style="">
  I will hide after 10 seconds
</div>

<div class="output1" style="">
  I will show after 10 seconds
</div>

<div class="timer"></div>

jsFiddle上查看
或者在live site

1 个答案:

答案 0 :(得分:0)

问题是,即使您从其中删除了该类,您的{ gROOT->Reset(); #include "Riostream.h" #include <iostream> #include <fstream> in.open( "somefile.dat"); TNtuple *ntuple = new TNtuple("ntuple","some data from ascii file","index1:index2:index3"); //declare variables, create histograms Double_t x,y,Price[215000],Diff[215000],Ret[215000],trend, Data[215000]; TFile *f = new TFile("TrendsCountBove.root","RECREATE"); TH1F *h1 = new TH1F("h1","Retornos",100,-0.3,0.3); TH1F *histo = new TH1F ("hist_from_ntuple", "some title", nbins, min,max); //do some stuff (didn't paste all calculations i do, but that works fine) for (Int_t i = 0; i+1 < nlines-1; i++) { Diff[i] = Price[i+1]-Price[i]; Ret[i] = TMath::Log(Price[i+1])-TMath::Log(Price[i]); h1->Fill(Ret[i]); ntuple->Fill(i*1.0,Ret[i],Price[i+1]); } 元素仍然具有单击事件侦听器。

潜在的解决方案是使用jQuery的.button1函数。每个事件类型的每个元素仅允许事件运行一次。 它将需要将您的.one事件合并为一个函数,如下所示:

.click

http://api.jquery.com/one/