Выполнить .click (функция() только первый нажмите

Question

Я пытаюсь выполнить данный .click(function() только на первый щелчок, но это всегда Execute когда щелчок.

работы Это когда нажмите .more-post-button будет добавить класс loading к .main ul и show-more-post в .main li после этого удаление класса loading на функции SetTimeout 7 второго

JS:.

$(".more-post-button").click(function() { 

    $('.main ul').addClass('loading'); 
    $('.main li').addClass('show-more-post'); 
    setTimeout(function(){ 
    $('.main ul').removeClass('loading'); 
    },7000); 

}); 

Мой вопрос заключается в том, как это сделать только при первом щелчке, а не при каждом нажатии.
Спасибо заранее.

Answer 1

Try :

$(".more-post-button").one("click", function() { 

    $('.main ul').addClass('loading'); 
    $('.main li').addClass('show-more-post'); 
    setTimeout(function(){ 
    $('.main ul').removeClass('loading'); 
    },7000); 
}); 

http://api.jquery.com/one/

Он будет обрабатывать его только один раз.

Answer 2

сохранить его в переменной:

var clicked = false; 

    $(".more-post-button").click(function() { 
    if(!clicked) { 
    clicked = true; 
    $('.main ul').addClass('loading'); 
    $('.main li').addClass('show-more-post'); 
    setTimeout(function(){ 
    $('.main ul').removeClass('loading'); 
    },7000); 
} 
}); 

Answer 3

Использование развязать в функции, чтобы удалить все события

$(this).unbind(); 

От JQuery 1.7 .off рекомендуемый способ

$(this).off(); 

Answer 4

Я использовал бы функцию jQuery's .one(). Это придает обработчик, который будет срабатывать только один раз.

Модифицированный JS

$(".more-post-button").one("click", function() { 

    $('.main ul').addClass('loading'); 
    $('.main li').addClass('show-more-post'); 
    setTimeout(function(){ 
    $('.main ul').removeClass('loading'); 
    },1000); 

}); 

Fiddle

Answer 5

Почему усложнять, попробуйте простое замыкание на что. Вы также не будете загрязнять пространство имен в глобале! Demo идет here

(function(){ 
'use-strict'; 

var button = document.getElementsByTagName('button')[0]; 
var myHandler = function() { 
    var click = 0; 
    return function() { 
     if(click === 0) { 
      alert('single click'); 
     } 
     click++; 
    } 
}(); 


button.addEventListener('click', myHandler, false); 
})(); 

Answer 6

На самом деле вы можете отправить в addEventListener вариант { once: true } сказать ему, чтобы стрелять только один раз. Поэтому добавление до @fubbe, а также с использованием только JavaScript, было бы:

var button = document.getElementsByTagName('button')[0]; 
var handler = function() { alert('once click'); }; 

button.addEventListener("click", handler, {once: true}); 

Источник:

• MDN - addEventListener
• webreflection - DOM Listener: capture, passive, and once