javascript 执行 .click(function() 仅第一次点击
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31702173/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Execute .click(function () only first click
提问by Aariba
I trying to Execute given .click(function()only on first click, but it always Execute when click.
It's works when click .more-post-buttonit will add class loadingto .main uland show-more-postto .main liafter that remove Class loadingon setTimeout function 7 second.
我试图.click(function()只在第一次点击时执行，但它总是在点击时执行。
这是当点击作品.more-post-button将添加类loading来.main ul并show-more-post以.main li该删除类后loading上的setTimeout功能7秒。
JS:
JS：
$(".more-post-button").click(function () {
$('.main ul').addClass('loading');
$('.main li').addClass('show-more-post');
setTimeout(function(){
$('.main ul').removeClass('loading');
},7000);
});
My question is how to do this for only on first click, not every time click.
Thanks in advance.
我的问题是如何仅在第一次单击时执行此操作，而不是每次单击时执行此操作。
提前致谢。
回答by artm
Try:
尝试：
$(".more-post-button").one("click", function () {
$('.main ul').addClass('loading');
$('.main li').addClass('show-more-post');
setTimeout(function(){
$('.main ul').removeClass('loading');
},7000);
});
It'll handle it only once.
它只会处理一次。
回答by fubbe
Why complicating things, try a simple closure on that. You won't pollute globale name space, too! Demo goes 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);
})();
回答by Sylhare
Actually you can send in the addEventListeneran option { once: true }to tell it to fire only once. So adding up to @fubbeand also using only javascript, it would be:
实际上，您可以发送addEventListener一个选项{ once: true }来告诉它只触发一次。所以加起来@fubbe并且只使用javascript，它会是：
var button = document.getElementsByTagName('button')[0];
var handler = function () { alert('once click'); };
button.addEventListener("click", handler, {once: true});
Source :
来源 ：
回答by Mike
I would use jQuery's .one()function. This attaches a handler that will only fire once.
我会使用jQuery的.one()功能。这会附加一个只会触发一次的处理程序。
Modified JS
修改后的JS
$(".more-post-button").one("click", function () {
$('.main ul').addClass('loading');
$('.main li').addClass('show-more-post');
setTimeout(function(){
$('.main ul').removeClass('loading');
},1000);
});
回答by messerbill
save it in a variable:
将其保存在一个变量中：
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);
}
});
回答by thllbrg
Use unbind in your function to remove all events
在函数中使用 unbind 删除所有事件
$(this).unbind();
From jQuery 1.7 .off is the recommended way
从 jQuery 1.7 .off 是推荐的方式
$(this).off();
