首页 > 其他分享 >vue中的nextTick函数

vue中的nextTick函数

时间:2023-10-10 20:34:46浏览次数:31  
标签:nextTick paly vue 函数 指令 歌曲 播放

今天实现切换歌曲时发现问题,切换歌曲的逻辑就是更改列表索引获取当前播放歌曲,然后播放歌曲。结果更改歌曲成功了,但是无法切换完播放。后来发现问题,歌曲加载需要时间,播放的指令运行时歌曲还未加载好,所以就出现了无法正常播放的问题。vue中的nextTick函数:在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。这样我们将audio.paly()的播放指令放在nextTick(()=>{audio.paly()})里面,这样就可以在dom更新完之后再执行里面的指令,解决了问题。

标签:nextTick,paly,vue,函数,指令,歌曲,播放
From: https://www.cnblogs.com/panglinglong/p/17755651.html

相关文章

  • electron+vue3+electron-updater 实现程序更新
    electron+vue3+edge调用C#.dll文件electron-edge-js用这玩意儿我血压高.....血压高的谨慎食用…文章目录electron+vue3+electron-edge-js调用C#.dll文件起步一、创建Vue3项目(ele)二、Vue3项目中添加electron模块1.添加electron-edge-js模块......
  • Vue源码学习(十):关于dep和watcher使用的一些思考
    好家伙, 前面想了好久,都没想明白为什么要dep和watcher打配合才能实现数据-视图同步为什么要多一个依赖管理这样的东西给每个数据绑个watcher(xxfunction),然后,数据变了,调set,然后调xxfunction,不就行了,然后今天突然想明白了,不是为什么要这么干,而是必须这么干 来看......
  • Vue框架结构说明
    vue安装三部曲:1:安装node.js环境2:vue-cli脚手架构建工具3:配置vue环境参考资料:https://blog.csdn.net/muzidigbig/article/details/80490884......
  • vue实现简单的页面框架
    效果图:代码结构:......
  • vue2,3render函数的简单使用
    render函数的主要作用:创建虚拟DOM:render函数负责创建虚拟DOM元素,这些元素以JavaScript对象的形式表示页面的结构和内容。根据状态和数据生成UI:render函数根据组件的状态(data数据)、属性(props)、计算属性(computed)、方法(methods)等信息,生成虚拟DOM,包括元素、组件、事件......
  • 详解如何通过JavaScript实现函数重载
    有的同学在开发中可能遇到过一个困扰,但是很少有人去解决这个问题,我这用一个例子展现出来constsearcher={};searcher.findAll=()=>{console.log("查询所有用户");};searcher.findByName=(name)=>{console.log("按照用户名称查询");};searcher.findByFirstN......
  • sql server 编写函数,去除小数点后多余的0
    sqlserver编写函数,去除小数点后多余的0要在SQLServer中编写一个函数来去除小数点后多余的零,你可以使用以下示例的方法:CREATEFUNCTIONdbo.RemoveTrailingZeros(@inputDECIMAL(18,6))RETURNSVARCHAR(255)ASBEGINDECLARE@resultVARCHAR(255);--将DE......
  • 在vue3中使用粒子库particles.vue3,只有背景没有粒子的问题
    按下述步骤,看是缺少安装包还是缺少引入方法(题主一开始不能显示粒子的原因是因为没有进行下述红色代码的操作)1.要安装两个包npminstallparticles.vue3npminstalltsparticles2.可选择全局引入main.js//导入粒子库importParticlesfrom"particles.vue3";//use注......
  • 前端面试八股文 Vue
    前端面试八股文Vue讲一下Vue框架的原理?我们使用Vue开发应用,实际上是编写若干Vue组件,实现模板、data、生命周期钩子等,然后执行newVue(),将根组件挂载到指定的DOM节点上面,当我们编写的组件中生命周期钩子里面的或者在模板的元素事件中改变数据时候,视图会响应地更新。这样就实现了......
  • Vue学习笔记(八):Vue脚手架
      Vue脚手架是Vue官方提供的标准化开发工具,使用Vue脚手架(vue-cli)可以快速创建vue项目。  1安装npm¶  第一步(仅第一次执行):下载npm,npm(nodepackagemanager)是nodejs下的包管理工具,后续下载、管理vue包都得通过npm进行,下载地址如下:http......