setTimeout立即與jQuery發射？

我想要發生的是當點擊「.slick-next」按鈕，瀏覽器等待3秒鐘，然後運行loadPHP（）函數。下面是我的代碼，這似乎理論上應該工作，但不是。會發生什麼情況是，setTimeout函數在頁面加載時運行一次，但在此之後單擊下一個按鈕不會執行任何操作。setTimeout立即與jQuery發射？

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

爲什麼會發生這種情況？

來源

2015-01-11 aaronmcavinue

'click'需要一個函數，而不是'undefined'，這是'nextButton'返回的內容。您可能需要'.click（nextButton）'，並且還要注意JS中沒有傳遞引用。 – elclanrs

@elclanrs你可以擴展它嗎？ – aaronmcavinue

http://jsfiddle.net/0y1gzf94/ –

要附加nextButton作爲一個單擊處理程序，不立即執行。

你可以寫：

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

除了需要傳遞的參數。這就是.bind()是：

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

此外，setTimeout的表達將簡化：

timeout = setTimeout(loadPHP, 3000);

來源

2015-01-11 03:36:00

這讓我走得最遠。現在它不會自動加載，並且單擊該按鈕將運行loadPHP（）函數一次。但我只能運行一次，然後單擊該按鈕不會再次運行該函數。 – aaronmcavinue

聽起來像'loadPHP'的副作用會破壞進程所依賴的某些內容。例如'.slick-next'會被替換嗎？ –

你是對的，它搞砸了一些東西。儘管其他一些答案也可以發揮作用，但這對我正在做的事情最有效。 – aaronmcavinue

這是因爲您在調用.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。

來源

2015-01-11 03:28:30

有點偏離主題的問題，但你是如何在你的答案中包含「運行代碼片段」的？ – aaronmcavinue

有關於此的[博客文章]（http://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/）。評論是討論的答案，所以你的問題是非常好的:) @ featherlight53不要忘記標記答案爲接受。 –

-1

跌落封閉周圍的功能，因爲的括號在右手邊的表達正在爲一個價值評估：

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

來源

2015-01-11 03:29:15 maurice

'var x =（function（）{}）;'和'var x = function（）{};'產生相同的結果：兩次，一個匿名函數被分配給'x'。 –

我希望發生的是「.slick-下一步」按鈕被點擊，瀏覽器等待時3秒鐘，然後運行loadPHP（）函數

我們可以通過設置功能的事件處理程序綁定到事件點擊做到這一點很容易：

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

您的代碼存在的問題是您通過調用點擊函數$（「。slick-next」）來觸發click事件。點擊（）

來源

2015-01-11 19:12:30 ZakiMak

setTimeout立即與jQuery發射？

回答

相關問題