如何在按钮单击、Javascript、Laravel 中创建延迟答案

【问题标题】：How to create delay in button click, Javascript, Laravel如何在按钮单击、Javascript、Laravel 中创建延迟
【发布时间】：2021-05-18 13:54:52
【问题描述】：

我正在使用 Laravel 创建一个应用程序。我有一个页面，其中内容被锁定，直到他们接受 cookie。 cookie 同意是一个 div，位于内容 div 之上。当他们点击接受时，我想触发一个设置 cookie 的 POST 请求，并且通过同样的点击，我想删除 div，并将 element.style.diplay 设置为“none”。

按下按钮时，我的 cookie 设置正确，div 消失了一秒钟，但随后又回来了，我认为这一定是因为 POST 请求重新加载页面并覆盖了更改。这是我的 JS 函数：

function removeBlock() {
    const cookieConsent = document.getElementById("cookieWrap");
    cookieConsent.style.display = "none";
}

document.getElementById("myBtn").addEventListener("click", removeBlock);

你们能帮我一些想法吗，如何实现？

谢谢

编辑这是我在 EmailController 上设置的 cookie 函数：

public function setCookie(Request $request){
            return redirect('/tasks')->cookie('thecookie', 'cookievalue', $minutes = 1, $path = null, $domain = null, $secure = false, $httpOnly = false);}

我的 index.blade.php 中的表单

    <section id="cookieWrap" class="blockedCookie">

        <form class="cookie" action="/tasks" method="POST">
            @csrf
            <h1>Do you accept cookies</h1>
            <div>
                <button id="myBtn">Accept</button>
            </div>
            <button>Reject All</button>
        </form>
    </section>

还有我的路线：

 Route::post('/tasks', [EmailController::class, 'setCookie']);

【问题讨论】：

如果您正在发出 AJAX 请求，那么这绝对不是原因。 AJAX 用于在不重新加载页面的情况下加载内容。但是，如果您正在提交表单，那么这可能是页面重新加载的原因。
cookie 是否包含有关用户是否同意的信息？即使 cookie 存在，同意 div 在第一次加载时是否可见？并且 cookie 可以被 JS 读取吗？
提供的代码看起来不错。你要提交表格吗？你能添加执行 POST 的代码吗？
我已经在上面添加了所有涉及的代码。这是一个提交是的。
您是否考虑过简单地创建一个烹饪客户端？这将避免 POST 到服务器及其后续页面重新加载：Document.cookie

标签： javascript laravel onclick addeventlistener buttonclick

【解决方案1】：

您可以使用 localstorage 来保存状态标志，例如isAccepted

然后您可以检查标志是否加载并决定是否显示内容。

设置标志

localStorage.setItem("isAccepted", true);

获取flag

isAccepted = localStorage.getItem("isAccepted");
if(!!isAccepted){
   #flag is set to true
}
else{
   #flag is false or never set
}

【讨论】：

【解决方案2】：

问题中的代码：

向服务器执行客户端 POST 请求
服务器创建 cookie 并向客户端发送响应
客户端重新加载页面

如果 cookie 是在客户端生成的，则可以避免到服务器及其后续页面刷新的往返。

<!-- use js-cookie to make things easier -->
<script src="https://cdn.jsdelivr.net/npm/js-cookie@rc/dist/js.cookie.min.js"></script>

  ...

<button id="accept">Accept</button>

// set a cookie client-side
//
// this is equivalent to the question's server-side code:
//
//   cookie('thecookie', 'cookievalue', $minutes = 1, $path = null,
//     $domain = null, $secure = false, $httpOnly = false)
//
document.getElementById('accept').onclick = function() {
  const inOneMinute = new Date(new Date().getTime() + 1 * 60 * 1000);
  Cookies.set('thecookie', 'cookievalue', {
    expires: inOneMinute,
    path: '',
    secure: false
  });

  // make the UI changes
  removeBlock();
}

【讨论】：