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和lodash等图书馆提供了多种延迟类型，例如debounce。

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

＆＃13;

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);

＆＃13;

<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>

＆＃13;

用您的逻辑替换警报（创建/切换图像）并更改同步图像更改的时间，您应该能够创建一个相当令人信服的动画。

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按钮中放置两个函数（一个必须延迟）？

2 个答案: