javascript 只调用一次函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8429020/
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
Call a function only once
提问by Carlos Salas
I've 3 divs (#Mask #Intro #Container) so if you click on Mask, Intro gets hidden and Container appears.
The problem is that I just want to load this only one time, not every time I refresh the page or anytime I click on the menu or a link, etc.
我有 3 个 div ( #Mask #Intro #Container)，所以如果你点击 Mask，Intro 会被隐藏，Container 会出现。问题是我只想加载一次，而不是每次刷新页面或点击菜单或链接等时。
How can I do this?
我怎样才能做到这一点？
This is the script I'm using for now:
这是我现在使用的脚本：
$(document).ready(function(){
$("div#mask").click(function() {
$("div#intro").fadeToggle('slow');
$("div#container").fadeToggle('slow');
$("div#mask").css("z-index", "-99");
});
});
Thank you!
谢谢！
回答by Yes Barry
You can try using a simple counter.
您可以尝试使用简单的计数器。
// count how many times click event is triggered
var eventsFired = 0;
$(document).ready(function(){
$("div#mask").click(function() {
if (eventsFired == 0) {
$("div#intro").fadeToggle('slow');
$("div#container").fadeToggle('slow');
$("div#mask").css("z-index", "-99");
eventsFired++; // <-- now equals 1, won't fire again until reload
}
});
});
To persistthis you will need to set a cookie. (e.g. $.cookie()if you use that plugin).
要坚持这一点，您需要设置一个 cookie。（例如，$.cookie()如果您使用该插件）。
// example using $.cookie plugin
var eventsFired = ($.cookie('eventsFired') != null)
? $.cookie('eventsFired')
: 0;
$(document).ready(function(){
$("div#mask").click(function() {
if (eventsFired == 0) {
$("div#intro").fadeToggle('slow');
$("div#container").fadeToggle('slow');
$("div#mask").css("z-index", "-99");
eventsFired++; // <-- now equals 1, won't fire again until reload
$.cookie('eventsFired', eventsFired);
}
});
});
To delete the cookie later on:
稍后删除cookie：
$.cookie('eventsFired', null);
回答by vsync
Just point to an empty function once it has been called.
一旦被调用，只需指向一个空函数。
var myFunc = function(){
myFunc = function(){}; // kill it
console.log('Done once!'); // your stuff here
};
回答by Tak
Web pages are statelessin that they don't hold states between page refreshes. When you reload the page it has no clue what has happened in the past.
网页是无状态的，因为它们在页面刷新之间不保持状态。当您重新加载页面时，它不知道过去发生了什么。
Cookies to the rescue! You can use Javascript(and jQuery has some nice pluginsto make it easier) to store variables on the client's browser. Store a cookie when the mask is clicked, so that when the page is next loaded it never shows.
饼干来拯救！您可以使用 Javascript（并且jQuery 有一些不错的插件可以使它更容易）在客户端的浏览器上存储变量。单击掩码时存储 cookie，以便下次加载页面时它永远不会显示。
回答by Kamran Ali
this code with will work perfect for you and it is the standard way provided by jquery to bind events that you want to execute only once
这段代码非常适合你，它是 jquery 提供的标准方式来绑定你只想执行一次的事件
$(document).ready(function(){
$("div#mask").one('click', function() {
$("div#intro").fadeToggle('slow');
$("div#container").fadeToggle('slow');
$("div#mask").css("z-index", "-99");
});
});
