Question

我想要发生的是当点击“.slick-next”按钮时，浏览器等待3秒，然后运行loadPHP（）函数。下面是我的代码，它似乎理论上应该工作，但没有。当页面加载时，setTimeout函数会运行一次，但在此之后单击下一个按钮不会执行任何操作。

var timeout = null;

$(".slick-next").click(nextButton(timeout));

var nextButton = (function(timeout) {
    window.clearTimeout(timeout);
    timeout = setTimeout(function() {
        loadPHP();  
    }, 3000);
});

我尝试在setTimeout中包装整个jQuery表达式，但这也不起作用。发生的事情是你不能点击按钮3秒钟，但随后可以无限点击它。

setTimeout(function() {
    $(".slick-next").click(nextButton(timeout));
}, 3000));

为什么会出现这种情况？

Answer 1

那是因为你在执行.click(nextButton(timeout))时已经调用了这个函数，从而启动了计时器。

相反，传递一个引用：

var timeout = null;
var clickCount = 0;

var loadPHP = function() {
  $('#output').text(clickCount + ': Loading from server ...');
};

var nextButton = function() {
  clickCount++;
  window.clearTimeout(timeout);
  timeout = setTimeout(loadPHP, 3000);
  $('#output').text('Timeout ' + timeout + ' set. Waiting 3s.');
};

$(".slick-next").click(nextButton);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="slick-next">Run</button>
<div id="output"></div>

...或者按照其中一条评论中的建议使用function.prototype.bind，但这并不是真正需要的，而是ECMA脚本5.1功能，因此在较旧的JavaScript浏览器实现中不可用。

另外值得注意的是：当为变量分配 函数表达式时，必须在使用变量之前完成;否则一个人传递undefined值。要避免此需求，请使用declaration hoisting。

Answer 2

您希望将nextButton作为点击处理程序附加，而不是立即执行。

你可以写：

$(".slick-next").click(nextButton);

除了需要传递参数。这就是.bind()的用途：

$(".slick-next").click(nextButton.bind(null, timeout));

此外，setTimeout表达式将简化：

timeout = setTimeout(loadPHP, 3000);

Answer 3

我想要发生的事情是＆＃34; .slick-next＆＃34;单击按钮，浏览器等待3秒钟，然后运行loadPHP（）函数

我们可以通过将函数设置为绑定到事件单击的事件处理程序来轻松完成此操作：

$(".slick-next").on("click",function(){
    setTimeout(function() {
        loadPHP();  
    }, 3000);
});

您的代码的问题在于您通过调用click函数$（＆＃34; .slick-next＆＃34;）来触发click事件。click（）

Answer 4

在函数周围放下封闭的parens，因为正在评估右侧的表达式的值：

var nextButton = function(timeout) {
    window.clearTimeout(timeout);
    timeout = setTimeout(function() {
        loadPHP();  
    }, 3000);
};

使用jQuery立即触发setTimeout？

4 个答案: