Question

我有一个代码：https://jsfiddle.net/AleshaOleg/zj69u8Lz

document.querySelector('.js-delete').addEventListener('click', function(e) {
  event(e, trigger);
});

function event(e, callback) {
  e.target.addEventListener('transitionend', function(e) {
    e.target.removeEventListener(e.type, arguments.callee);
    callback(e);
  });
}

function trigger(e) {
  alert("DONE");
}

.js-delete {
  -webkit-transition: width .3s;
  transition: width .3s;
  width: 100px;
}

.js-delete:hover {
  width: 100%;
}

<button class="js-delete">Delete</button>

其中，我点击了事件监听器，然后再点击一个内部事件，在转换结束后触发，警报信息应该可见。

一切都好。但问题是，当我点击超过1次时，在转换结束之前，我将收到相同数量的警报消息。

所以，我想获得，只需一个警报，我点击我的按钮多少次。

谢谢！

Answer 1

我不会使用arguments.callee，它已被弃用（不适用于'严格模式'）。

只需为事件处理程序使用命名函数而不是匿名函数，就可以更轻松地删除它们。

还有一些包装函数可以再次添加事件处理程序。

// Start application lifecycle by registering click event
registerClickHandler();

function registerClickHandler() {
  document.querySelector('.js-delete').addEventListener('click', clickHandler);
}

function clickHandler(e) {
  // Immediatley remove click event handler after event fired
  e.target.removeEventListener(e.type, clickHandler);
  // Register transition event handler
  registerTransitionHandler(e);
}

function registerTransitionHandler(e) {
  e.target.addEventListener('transitionend', transitionHandler);
}

function transitionHandler(e) {
  // Immediately remove transitionend event handler after event fired
  e.target.removeEventListener(e.type, transitionHandler);
  // Register click event again
  registerClickHandler();
  // Run callback at transitionend event
  transitionEndCallback(e);
}

function transitionEndCallback(e) {
  alert("DONE");
}

.js-delete {
  -webkit-transition: width .3s;
  transition: width .3s;
  width: 100px;
}
.js-delete:hover {
  width: 100%;
}

<button class="js-delete">Delete</button>

Answer 2

这对我来说似乎是一个黑客，但我添加了一个变量busy，我切换它，如果已经调用它将不会被调用

var busy=false;

document.querySelector('.js-delete').addEventListener('click', function(e) {
	if(!busy){
  busy=true;
  event(e, trigger);
  }
});

function event(e, callback) {
  e.target.addEventListener('transitionend', function(e) {
    e.target.removeEventListener(e.type, arguments.callee);
    callback(e);
  });
}

function trigger(e) {
  alert("DONE");
  busy=false;
}

.js-delete {
  -webkit-transition: width .3s;
  transition: width .3s;
  width: 100px;
}

.js-delete:hover {
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="js-delete">Delete</button>

Answer 3

每次单击删除按钮时，您都会向transitionend添加多个事件侦听器。我已经调整了你的代码，看看是否有效：

var clickHandler = function(e) {
    event(e, trigger);
}

document.querySelector('.js-delete').addEventListener('click',clickHandler);

function event(e, callback) {
  e.target.addEventListener('transitionend', function(e) {
      e.target.removeEventListener(e.type, arguments.callee);
      callback(e);
   });
}

function trigger(e) {
   alert("DONE");
   e.target.removeEventListener(e.type, clickHandler);
}

Answer 4

这种情况正在发生，因为每次点击按钮，你都会注册一个带有'transitionend'的新eventListener ... tbh，我不知道为什么你还有这个。将您的代码修改为：

Public Class mdi1

Dim con As inifile = New inifile()
Dim constr = con.readconnectionstring()

在第一个事件之后阻止事件捕获

4 个答案: