jQuery로 setTimeout을 즉시 실행 하시겠습니까?

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

전체 jQuery 표현식을 setTimeout에 래핑하려고했으나 작동하지 않습니다. 3 초 동안 버튼을 클릭 할 수 없지만 끝까지 클릭 할 수는 있습니다.

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

왜 이런 현상이 발생합니까?

Answer 1

당신은, 클릭 핸들러로 nextButton을하지 연결 즉시 실행합니다.

당신은 쓸 수 :

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

을 인수를 전달할 필요를 제외하고. 또한

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

의의 setTimeout 식을 단순화 :

timeout = setTimeout(loadPHP, 3000); 

Answer 2

.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입니다 script 5.1 기능을 제공하므로 이전 JavaScript 브라우저 구현에서는 사용할 수 없습니다. 또한 노트

: 는 변수함수식을 할당, 이는 변수가 사용 전에을 수행한다; 그렇지 않으면 undefined 값을 전달합니다. 이 필요를 피하려면 declaration hoisting을 사용하십시오. 오른쪽에있는 표현식은 값에 대해 평가되고 있기 때문에

Answer 3

는 드롭 바깥 쪽 함수 주위에 괄호 :

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

Answer 4

내가 일이 원하는 것은 때 ".slick - 다음"버튼을 클릭, 브라우저 대기입니다 즉 .bind()가 무엇인지입니다 삼초 후 loadPHP() 함수를 실행

우리는 이벤트 클릭에 바인딩 이벤트 핸들러와 같은 기능을 설정하여 쉽게 할 수

:

을

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

코드에 문제가있는 것은 click 함수 $ (". slick-next")를 호출하여 click 이벤트를 발생시킨 것입니다.