如何将两个功能（一个必须延迟）放在一个 onclick 按钮中？

Question

我在将功能组合到一个 onclick 按钮中时遇到问题。我的产品是这样的：当我点击一个不可见的按钮时，我想放下一个锤子，当锤子到达一个图标时，该图标已经变成了另一张图片。

这是我的代码，但它在 javascript 和 jquery 中：

$('.box hammer').on('click', function() {
  $(this).toggleClass('clicked');
});

function changeImage1() {
  var image = document.getElementById('safari');  
    if (image.src.match("bulbon")) {
      image.src = "safari.png";
    } else {
      image.src = "safariflat.png";
  }
}

Answer 1

您可以将多个 on 处理程序绑定到同一个元素和事件，这不是问题。

延迟这些处理程序之一可以通过多种方式完成，具体取决于您。 Underscore and lodash offer a number of delay types, such as debounce.

这样的库

您应该可以使用类似的东西：

function immediateHandler() {
  alert("Immediate handler!");
}

function lateHandlerImpl() {
  alert("Late handler!");
}

var lateHandler = _.delay(lateHandlerImpl, 2500);

$('div.button').on('click', immediateHandler);
$('div.button').on('click', lateHandler);

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="button">Click Me!</div>

用您的逻辑（creating/switching 图像）替换警报并更改同步图像更改的时间，您应该能够创建相当有说服力的动画。

Answer 2

您可以为此使用 setTimeout：

$('.box hammer').on('click', function() {
  $(this).toggleClass('clicked');
setTimeout(function() {
      changeImage1();
      // change time below to the time your animation takes
    }, 5000);
});

function changeImage1() {
  var image = document.getElementById('safari');  
    if (image.src.match("bulbon")) {
      image.src = "safari.png";
    } else {
      image.src = "safariflat.png";
  }
}

如何将两个功能（一个必须延迟）放在一个 onclick 按钮中？

How can I put two functions (one must delay) in one onclick button?

javascript

jquery

events

animation