点击隐藏盒子并设置倒计时显示，倒计时不规范

问题遇到的现象和发生背景

做一个类似流氓广告的效果，就是点击关闭之后只是在界面上隐藏，实际上有个倒计时，倒计时结束之后广告又重新显示在原来的位置

问题相关代码，请勿粘贴截图
 <style>
        .father{
            position: fixed;
            right: 0;
            bottom: 0;
            width: 200px;
            height: 300px;
            background-color: orange;
        }
        .son{
            position: fixed;
            bottom: 280px;
            right: 0;
            line-height: 20px;
            text-align: center;
            width: 20px;
            height: 20px;
            background-color: #ccc;
        }
    </style>
<body>
    <div class="father">
        <div class="son">x</div>
    </div>
    <script>
        var son = document.querySelector('.son')
        var father = document.querySelector('.father')
        son.onclick = function(){
            father.style.display = 'none';
        }
        var time = setInterval(function(){
                father.style.display = 'block'
            },5000)  
    </script>
</body>
运行结果及报错内容

运行之后感觉每一次倒计时都不一样

我想要达到的结果

让广告在每次点击关闭之后都是5秒之后重新显示

var son = document.querySelector(".son");
var father = document.querySelector(".father");
son.onclick = function () {
  father.style.display = "none";
  setTimeout(function () {
    father.style.display = "block";
  }, 5000);
};