今日总结：巧用setTimeout()方法来制造局部刷新效果

秋窗7

于 2024-08-22 00:25:27 发布

阅读量345

点赞数 2

分类专栏：前端总结文章标签：制造 vue.js 前端

本文链接：https://blog.csdn.net/2302_79169315/article/details/141405331

版权

前端同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

总结

3 篇文章 0 订阅

订阅专栏

☁️ 前言

开篇之前，我们先来总结一下刷新页面有哪些方法，首先全局刷新可以用原生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">
                        &times;
                    </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，我是秋窗，今天的总结就到这里，我们下期再见👋

秋窗7

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
今日总结：巧用setTimeout()方法来制造局部刷新效果

双向数据绑定，比如说v-model响应式数据更新，比如说在data:{}里面的变量监听事件：watch生命周期函数：mounted()计算属性：computedv-show和v-if还有其他方法，比如说在需要刷新的地方重新手动调用某个函数（一般适用于mounted()生命周期函数不起作用的时候）或者自己另写一套代码。
复制链接

扫一扫