今日总结：巧用setTimeout()方法来制造局部刷新效果
☁️ 前言
开篇之前，我们先来总结一下刷新页面有哪些方法，首先全局刷新可以用原生JS自带的方法：
window.location.reload()
如果你想要确保从服务器获取页面而不是从浏览器缓存中加载，可以传递一个参数true给window.location.reload方法：
window.location.reload(true);
其次，如果你使用了Vue框架，你可以有几种常用手段：
- 双向数据绑定，比如说v-model
- 响应式数据更新，比如说在data:{}里面的变量
- 监听事件：watch
- 生命周期函数：mounted()
- 计算属性：computed
- v-show和v-if
还有其他方法，比如说在需要刷新的地方重新手动调用某个函数（一般适用于mounted()生命周期函数不起作用的时候）或者自己另写一套代码。
使用setTimeout刷新页面
这里还是给出一个使用场景，比如说，使用Bootstrap5的模态框组件时，我遇到一个问题，就是除非刷新页面，否则模态框的数据会一直留存，后来我利用setTimeout方法巧妙地解决了这个问题，以下是代码案例：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Bootstrap 实例 - 模态框（Modal）插件</title><!-- 引入bootstrap5 --><link rel="stylesheet" href="https://cdn.staticfile.net/twitter-bootstrap/3.3.7/css/bootstrap.min.css"><script src="https://cdn.staticfile.net/jquery/2.1.1/jquery.min.js"></script><script src="https://cdn.staticfile.net/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head><body><!-- 引入vue --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><!-- 按钮触发模态框 --><button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">模态框</button><!-- 模态框（Modal） --><div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><!-- 头部 --><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button><h4 class="modal-title" id="myModalLabel">标题</h4></div><!-- 主体 --><div class="modal-body"><!-- 输入框 --><textarea name="" id="" v-show="!isSend"></textarea><!-- 提示信息 --><span v-show="isSend">提交成功</span></div><!-- 尾部 --><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">关闭</button><button type="button" class="btn btn-primary" @click="send">提交更改</button></div></div></div></div><script>var app = new Vue({el:'#myModal',data:{isSend:false,},methods:{send:function(){this.isSend = true}}}) </script>
</body></html>
这段代码的核心部分是给发送按钮绑定了一个事件，点击之后会隐藏输入框，同时显现“提示信息”
读者运行这段代码会发现，点击发送按钮，会提示“提交成功”，但是关闭模态框之后，你再点击按钮，会发现模态框的内容还是“提交成功”，除非用户手动刷新页面。
现在的问题是，手动刷新不仅麻烦，而且有时候会加载很久，那么能不能在原有的基础上稍加改动，可以实现动态刷新呢？答案我们的标题其实已经给出——————使用setTimeout方法
代码改动如下：
methods:{send:function(){this.isSend = truesetTimeout(()=>{this.isSend = false},1000)
}
}
加上这段代码，读者可以在此运行一下代码，看有何不同。
没错，提示的效果起到了，同时设置定时器，能在一定时间之后将模态框的状态重置，这是非常好的，没有花里胡哨的方法，只有非常朴素的理念。
OK，我是秋窗，今天的总结就到这里，我们下期再见👋