Question

我有一个不带<uses>的SVG，当您触摸其中一个时，会触发touchstart事件。如果他们移动了touchmove事件，则该事件将触发一个计时器。在touchend上，应在应更改值之前清除计时器。但是，它还是会改变。

其结果是，即使触发了IsDraggingUnit，true仍被设置为touchend。我使用alert进行了测试，当您结束对该元素的触摸时，它会成功触发。

var IsDraggingUnit = false;
var timeOutClear;

$('#Selected_Items use').on("touchstart", function(event) {
  IsDraggingUnit = false;
  $('#test > p').text(IsDraggingUnit);

  $(this).on("touchmove", function(event) {
    timeOutClear = setTimeout(function() {
      IsDraggingUnit = true;
      $('#test > p').text(IsDraggingUnit);
    }, 500);
  });

  $(this).on("touchend", function(event) {
    clearTimeout(timeOutClear);
    if (IsDraggingUnit == false) {
      fnPlotShow($(this), bookingRental, bookingExists)
    }
  });
});

Answer 1

问题是因为您在touchmove事件中嵌套了touchend和touchstart事件。因此，在随后的touchstart事件中，每个事件都会触发多次，并且对原始超时的引用会丢失，并且clearTimeout()不会全部清除它们。

要解决此问题，请不要嵌套事件处理程序，也不要忘记在isDraggingUnit上将false设置回touchend

var isDraggingUnit = false, timeOutReference;

$('#Selected_Items use').on({
  touchstart: function(event) {
    isDraggingUnit = false;
    $('#test > p').text(isDraggingUnit);
  },
  touchmove: function(event) {
    timeOutReference = setTimeout(function() {
      isDraggingUnit = true;
      $('#test > p').text(isDraggingUnit);
    }, 500);
  },
  touchend: function(event) {
    clearTimeout(timeOutReference);
    if (!isDraggingUnit) {
      fnPlotShow($(this), bookingRental, bookingExists)
    }
    isDraggingUnit = false;
  }
});

还请注意，您的问题指出SVG拥有<uses>个节点，但您选择了use。我认为这只是问题的错字，因为如果那里不匹配，那将根本无法工作。

如何使clearTimeout失火

1 个答案: