如何使用 jquery 只运行一次函数？答案

【问题标题】：How to run a function only once with jquery?如何使用 jquery 只运行一次函数？
【发布时间】：2016-10-19 14:45:03
【问题描述】：

我有一个只有注册用户才能访问的网页。
我使用 Bootstrap 作为 CSS 框架。
如果用户登录，则会出现一个带有成功消息的警告框，如下所示：

<div class="container">
    <div class="alert alert-success" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <strong>Success!</strong> You have been signed in successfully!
    </div>
</div>

现在我想在几秒钟后关闭它。我使用这个 jquery 脚本来做到这一点：

window.setTimeout(function() {
     $(".alert").fadeTo(500, 0).slideUp(500, function(){
     $(this).remove();
  });
}, 1500);

我怎样才能只运行一次这个代码，这样如果用户不小心刷新了浏览器就不会再次看到这个警报？

我在这里读过这篇文章https://stackoverflow.com/a/23859937/5930557 并且知道它可以使用来自http://api.jquery.com/one/ 的.one() 函数来完成
但我不知道如何将它包含到我的代码中。有没有人可以为我纠正并解释，因为 jquery 和 javascript 对我来说是新的：P

【问题讨论】：

使用刷新的浏览器 one() 函数无法帮助您，您可以尝试在 localStorage 中设置一个变量，并使用某种会话 ID 进行检查。
如果用户刷新页面，脚本将重新加载，因此 one() 将不起作用。我会使用 cookie 或会话来做到这一点。如果会话或 cookie 存在，我将不会运行脚本，否则它将运行。
cookies，或者localStorage，或者直接调用登录成功函数提示的函数。

标签： javascript jquery twitter-bootstrap function twitter-bootstrap-3

【解决方案1】：

您可以使用 cookie。解释了here

当页面加载时，你可以检查 cookie，如果它是空的，如果它不为空，你可以做你想做的事情。

【讨论】：

【解决方案2】：

.one() 将触发一次事件，每次加载页面时，因此不适用于您的示例。

正如另一个答案所说，您可以使用 cookie，如下所示：

// get the cookie if its there
var popUpShown = getCookie('popUpShown');
var numberOfDaysCookieExpiresIn = 99999999999;

// check the cookie to see if the popup has been shown already
if (popUpShown != '1') {
  window.setTimeout(function() {
    $(".alert").fadeTo(500, 0).slideUp(500, function(){
      $(this).remove();
    });
  }, 1500);

  // set the cookie so we dont show the pop up again
  setCookie('popUpShown', '1', numberOfDaysCookieExpiresIn);
};

【讨论】：

【解决方案3】：

一种解决方案是使用 cookie 并将其日期设置为非常遥远的未来。

注意：这个小提琴不允许你设置 cookie。

$(function(){
    var popup = getCookie(popup);
    if(popup){
//Dislay your alert
        $('.container').append(
            ' <div class="alert alert-success" role="alert"> '
            + '<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>'
            + '<strong>Success!</strong> You have been signed in successfully! </div>'
        );

    }
});

window.setTimeout(function() {
    $(".alert").fadeTo(500, 0).slideUp(500, function(){
        $(this).remove();
        //Set the alert cookie to false
        document.cookie = "popup=false; expires=Thu, 18 Dec 2090 12:00:00 UTC";
    });
}, 1500);


//Function to get cookies
function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i = 0; i <ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length,c.length);
        }
    }
    return "";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    
</div>

【讨论】：