Question

我想让我的按钮在按下时执行循环，而不是单击。

要解释起来并不容易，但是我想触发一个循环，每隔四分之一秒将“小时”计数加1，当连续按下按钮时，比按下50分钟几分钟和几秒更快。这是我的代码：

$('#plus1').mousedown(function() {
    setTimeout(function() {
    if (parseInt($('#Hours').html()) < 23) {
        $('#Hours').html(parseInt($('#Hours').html())+1); 
    } else {
        $('#Hours').html(0);
    }
  }, 250);
});

不幸的是，当我按下按钮时，即使按下按钮，它也只会加1并停止。我不知道该怎么做，我尝试了一切。甚至在mousedown之前设置超时功能。

如果有人能解释如何继续下去，那就很友善了：3。

链接到我的网页：

Answer 1

$('#plus1').mousedown(function() {
  $(this).on('mouseup', stopCount);

  function stopCount(token) {
    clearInterval(token);
  }

  let token = setInterval(function() {
  if (parseInt($('#Hours').html()) < 23) {
    $('#Hours').html(parseInt($('#Hours').html())+1); 
  } else {
    $('#Hours').html(0);
  }
 }, 250);

});

尝试使用setInterval而不是setTimeout，当mousedown事件被注册时，鼠标事件触发回调以清除间隔

Answer 2

你可以使用 setInterval 和 stopInterval 函数获得你要求的内容，但我认为最好将一个类应用于元素以查看按钮是否被按下或不。

一个小例子：

#include <iostream>
#include <vector>

using namespace std;
const int NUM_TEAMS = 4;
const int NUM_MEMBERS = 3;

struct TeamS{
   int ID;
   string teamMembers[3];
};


void Initialize (vector <TeamS> & TeamV, const int id[],
             const string m[][NUM_MEMBERS], int arraySize){
for (int i = 0; i<NUM_TEAMS;i++){
    for (int x=0; x<NUM_TEAMS;x++){
        for (int y = 0; y<NUM_MEMBERS;y++){
            TeamV.push_back({id[i],m[x][y]});
        }
      }
   }
 }


int main(){

vector <TeamS> TeamV; //content of arrays below should go in to this vector

const int ID [NUM_TEAMS] ={ 123, 321, 456, 789};
const string MEMBERS [NUM_TEAMS] [NUM_MEMBERS ] =
{
    {"Sarah", "Joe", "John"},
    {"Chris", "Kevin", "James"},
    {"Tom", "Kim", "Emily"},
    {"Jill", "Jason", "Jim"}
};

Initialize(TeamV, ID, MEMBERS, NUM_TEAMS*NUM_MEMBERS);
}

var clockTime = 0; // variable that is intended to contain the number of seconds

function updateTime(){ // Function to display the time and to calculate the seconds, minutes, and hours
  if(clockTime < 0) clockTime = 3600 * 24 - 1; // set limit clock
  if(clockTime >= 3600 * 24) clockTime = 0;
  
  $(".clock_h").text(Math.floor((clockTime / 3600) % 3600));
  $(".clock_m").text(Math.floor((clockTime / 60) % 60));
  $(".clock_s").text(clockTime % 60);
}

function loopTime($e){ // Function that detects the presence of the PRESS class and repeats itself when this class is not removed
  if($e.hasClass('press')){
    var increment = $e.hasClass('clock_plus') ? 1 : -1;
    switch($e.parent().attr('data-time')){
      case 'h':
          clockTime += increment * 3600;
        break;
      case 'm':
          clockTime += increment * 60;
        break;
      case 's':
          clockTime += increment;
        break;
    }
    
    setTimeout(function(){
      loopTime($e);
    },200);
  }
  updateTime();
}

$(function(){ // When loading the page, apply the events to the buttons
  $('.clock_plus, .clock_minus').mousedown(function(){
      loopTime($(this).addClass('press'));
    }).mouseout(function(){
      $(this).removeClass('press');
    }).mouseup(function(){
      $(this).removeClass('press');
    });
});

.clock{
  float: left;
  width: 70px;
  text-align: center;
  position: relative;
  margin-left: 10px;
}

.clock button{
  width: 100%;
  height: 25px;
}

.clock span{
  font-size: 26px;
}

.clock .clock_sep{
  position: absolute;
  top: 50%;
  left: 100%;
  margin-top: -18px;
  font-size: 30px;
  line-height: 30px;
}

.press{
  border: solid 1px red;
}

Answer 3

对于那些稍后发现该帖子的人，我发现自己有一个有效的代码（感谢Daron Spaulding为我提供了很多帮助的样本）

我修改并进行了一些研究，代码就像我想要的那样：

$('#plus1').mousedown(function() {

  var token = setInterval(function() {
    if (parseInt($('#Hours').html()) < 23) {
        $('#Hours').html(parseInt($('#Hours').html())+1); 
    } else {
        $('#Hours').html(0);
    }
}, 250);

$('#plus1').mouseup(function() {
    clearInterval(token);
  });

});

谢谢:)。

jQuery按钮循环不起作用

3 个答案: