Question

我有一个简单的瓷砖。点击后，瓷砖将填充内容B而不是内容A，再次点击时，瓷砖将重新填入内容A而不是内容B.

这是jQuery代码：

$(".switch").on('click', function() {
  toggleBrand($(this));
})

function toggleBrand(_this) {
  _this.children().not(".no-display").toggle();
  _this.children(".no-display").toggle();
}

我现在想要的是第二次“点击”自动发生。即，当您单击对象时，内容B显示而不是A，则延迟时间为2秒，内容A再次显示而不是内容B而无需您单击。

我尝试使用setTimeout，如下所示：

$(".switch").on('click', function() {
  _this = $(this)
  toggleBrand(_this);

  setTimeout(toggleBrand(_this),2000); 
})

但即使我正确地设置了setTimeOut undefined，小提琴仍然会打破...我没有正确使用setTimeout吗？

在这里小提琴：https://jsfiddle.net/v018hh52/2/

Answer 1

是的，你正在使用setTimeout错误的

您正在传递函数的返回值，而应传递函数。

$(".switch").on('click', function() {
  _this = $(this)
  toggleBrand(_this);

  setTimeout(function() { toggleBrand(_this) },2000);

  // OR, thanks @4castle for his comment
  setTimeout(toggleBrand, 2000, _this);
})

解释

function foo() { return "value" };

foo // -> function
foo() // -> "value"

Answer 2

jsfiddle：https://jsfiddle.net/v018hh52/5/

所有你需要做的就是修复你的setTimeout电话:(，基本上你提供的setTimeout有一个函数可以调用你的函数，如果你提供的函数就像你正在做的那样它将被调用asap而不是2000年（2秒）

因此，只需将setTimeout调用更改为

即可

setTimeout(function() {
    toggleBrand($this)
  }, 2000);

这应该可以解决问题。我也更新了你的CSS，因为你一直点击它会突出显示内容，然后你就再也看不到了。

P.S。您也可以在运行此代码时设置一个标志，因为用户可以继续点击div，它将获得拼图中的setTimeout。此外，如果此内容是从其他脚本生成的，您可能希望在＆＃39;文档＆＃39;

上创建全局事件监听器

Answer 3

作为webdeb答案的替代方法，您还可以将参数绑定到函数，如下所示：

setTimeout(toggleBrand.bind(null, _this), 2000);

或者完全删除_this参数，只需在this函数中使用toggleBrand：

setTimeout(toggleBrand.bind(_this), 2000);

将toggleBrand功能实现为：

function toggleBrand() {
  this.children().not(".no-display").toggle();
  this.children(".no-display").toggle();
}

如何执行动画，等待5秒，然后再做一次？

3 个答案: