☁️ 前言
开篇之前,我们先来总结一下刷新页面有哪些方法,首先全局刷新可以用原生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 = true
setTimeout(()=>{
this.isSend = false
},1000)
}
}
加上这段代码,读者可以在此运行一下代码,看有何不同。
没错,提示的效果起到了,同时设置定时器,能在一定时间之后将模态框的状态重置,这是非常好的,没有花里胡哨的方法,只有非常朴素的理念。
OK,我是秋窗,今天的总结就到这里,我们下期再见👋