$ ("# id"). Click (function() {calculate()});

Что не так с линией в заголовке?

В приведенном ниже примере предполагается сделать кнопку, которая будет увеличивать счетчик каждый раз при нажатии. Тем не менее, я применяю задержку в 2000 мс между нажатиями кнопок. Версии ниже работ, однако, если я использую закомментирована линию вместо

document.getElementById("rollButton").onclick=function(){calculation()};

(как в функции afterWaiting())

я получаю различные нечетные результаты, например, что счетчик начинает приращением через А много больше, чем 1, и время ожидания исчезает?

<!DOCTYPE html> 
<html> 
    <head> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
    <script> 

     function afterWaiting() 
     { 
      $("#rollButton").css("color","black"); 
      //$("#rollButton").click(function(){calculation()}); 
      document.getElementById("rollButton").onclick=function(){calculation()}; 

     } 

     var counter=0; 
     function calculation() 
     { 

      ////Enforcing wait: 
      document.getElementById("rollButton").style.color="red"; 
      document.getElementById("rollButton").onclick=""; 
      window.setTimeout("afterWaiting()",2000); 


      counter=counter+1; 
      document.getElementById("test").innerHTML=counter; 

      } 



    </script> 

    </head> 
<body> 

    <button type="button" onclick="calculation()" id="rollButton"> Roll! </button> 

<p id="test"> </p> 


</body> 
</html>

Что я неправильно понял?

заранее спасибо :)

JSFiddle: http://jsfiddle.net/Bwxb9/

источник

2013-02-23 Kaare

Можете ли вы попробовать скрипт JS, и что говорит консоль – Sedz

Я запускаю его через браузер, который не вызывает никаких жалоб? – Kaare

Единственный код требуется

<button type="button" id="rollButton"> Roll! </button> 
<p id="test"> </p> 


var counter = 0; 
var $test = $('#test'); 
var $rollButton = $('#rollButton'); 
function increment(){ 
    $test.html(counter++); 
    $rollButton.off('click', increment); 
    setTimeout(function(){ 
     $rollButton.on('click', increment); 
    }, 2000); 
} 
$rollButton.on('click', increment);

Демо: Fiddle

Обновлено: как это было предложено Энди, но я бы рекомендовал ответ Энди, как он не предполагает каких-либо дополнительных манипуляций событий

var counter = 0; 
var $test = $('#test'); 
var $rollButton = $('#rollButton'); 
function increment(){ 
    $test.html(counter++); 
    setTimeout(function(){ 
     $rollButton.one('click', increment); 
    }, 2000); 
} 
$rollButton.one('click', increment);

Демонстрация: Fiddle

источник

2013-02-23 13:42:03

В этом случае вы также можете использовать .one() http://api.jquery.com/one/ вместо .on(). таким образом вам не нужно вызывать(). – Andy

@ Andy Да, вы правы –

Это обычно немного странным и запутанным подхода. Вот как я бы это сделать, не смешивая JQuery и чисто JS (OnClick) слишком много:

http://jsfiddle.net/LGvKS/

var wait = false; 
counter = 0; 
$('button').click(function(){ 
    if(!wait){ 
     $('span').text(++counter); 
     wait=true; 
     setTimeout(function(){ 
      wait=false; 
     },2000); 
    } 
});

источник

2013-02-23 13:40:38 Andy

хорошо, я делаю это так, потому что я изучаю jQuery, поэтому пытаюсь перейти от js-версии к jQuery, не разбирая вещи. – Kaare

@Kaare Конечно, ничего страшного в этом. Это звучало гораздо жестче, чем я предполагал. – Andy

Я думаю, что @Andy указывает здесь (в своем коде), что вам не нужно каждый раз удалять обработчик событий. Просто установите флаг (или вы можете отключить кнопку) в течение 2 секунд. И это то, что я бы тоже сделал. –

Разница заключается в том, что при применении обработчики событий через onclick как вы делаете в оригинале версии, вы можете привязать только один обработчик к элементу. И используя onclick="" вид очищает его.

При использовании JQuery .click(handler) вы свяжете новый обработчик каждый раз, когда вы называете его (и вы можете отвязать его с unbind('click') (и не с onclick=""). Таким образом, после нескольких звонков в afterWaiting вы применили Mulitple обработчиков нажмите на ваш элемент, и на каждый клик функция calculation запускает несколько раз ..

Таким образом, один из способов исправить это заменить

document.getElementById("rollButton").onclick="";

$('#rollButton').unbind('click');

источник

2013-02-23 13:41:19

'и не с onclick =" "' - вы уверены? Как связать jQuery с этим элементом? –

@JanDvorak связан с помощью 'addEventListener' (* или' addEvent' старого IE *), который работает по-другому (* читайте http://stackoverflow.com/questions/6348494/addeventlistener-vs-onclick*) –

$ ("# id"). Click (function() {calculate()});

ответ

Смежные вопросы