小程序 requestAnimationFrame 死循环

最新推荐文章于 2024-06-21 08:42:30 发布
最新推荐文章于 2024-06-21 08:42:30 发布
阅读量1.6k 收藏
点赞数
文章标签： 游戏 javascript ViewUI
原文链接：http://www.cnblogs.com/znsongshu/p/9429638.html
版权

小程序没有requestAnimationFrame  这个方法，小游戏有，使用这个方法会造成死循环

转载于:https://www.cnblogs.com/znsongshu/p/9429638.html

weixin_33928467
关注
深入理解JavaScript事件循环Event Loop：宏任务与微任务
Allen-
05-11 795
事件循环是JavaScript运行时环境（如浏览器或Node.js）中用于协调执行代码的一种机制。「宏任务」（Macrotasks）和「微任务」（Microtasks），以确保异步操作能够有序且高效地完成，同时保证了代码的非阻塞执行特性。
requestAnimationFrame
heheda222的博客
10-09 1474
requestAnimationFrame使用JS操作动画，如果你想做逐帧动画，你应该用这个方法。这个方法接受一个函数为参，该函数会在重绘前调用。requestAnimationFrame通过在参数中递归调用requestAnimationFrame()以便得到逐帧动画，被调用的频率是每秒60次，但也会按照W3C标准频率。IE10和现代浏览器都支持。返回值 requestID 是一个长整型非零值,
requestAnimationFrame 实现
weixin_42079403的博客
03-12 1236
背景： 因为 JS 是单线程执行的，如果前面的代码影响了性能，就会导致 setInterval或setTimeout不会按期执行。
前端开发必备：requestAnimationFrame、setInterval、setTimeout——功能解析与优劣对比
最新发布
在这里，我分享我的技术心得、项目经验、实用的技术教程、深入的技术分析以及前端开发的最新动态，希望能帮助到更多的人。
06-21 4148
它会将回调函数加入到浏览器下一次重绘之前要执行的队列中。setInterval：与 setTimeout 类似，setInterval 也会将要执行的代码或函数放入事件循环队列中，但它在指定的时间间隔后会一直重复执行，直到 clearInterval 被调用或窗口被关闭。函数节流：在高频率事件(resize,scroll等)中，为了防止在一个刷新间隔内发生多次函数执行，使用requestAnimationFrame可保证每个刷新间隔内，函数只被执行一次，这样既能保证流畅性，也能更好的节省函数执行的开销。
微信小游戏之 wechat-adapter的使用(requestAnimationFrame)
weixin_41069726的博客
03-24 1696
import "./weapp-adapter.js" var ctx = canvas.getContext("2d") var bg =new Image() bg.src ="./images/bg.jpg" bg.width =512 bg.height=512 var width = window.innerWidth //全局对象 var height = window.inn...
Vue中使用JavaScript中的requestAnimationFrame动画循环实现循环滚动效果-demo
JackieDYH的博客
01-01 1269
requestAnimationFrame是一个由浏览器提供的 JavaScript 方法，用于在下一次浏览器重绘之前执行指定的回调函数。它接受一个回调函数作为参数，并返回一个整数值，可以用于取消动画循环。使用 requestAnimationFrame 可以创建平滑的动画效果，并且能够有效地控制动画的帧率，以适应不同的设备和浏览器性能。
requestAnimationFrame简单学习
qq_46186155的博客
05-22 461
为了提高性能和电池寿命，在大多数浏览器里，当 requestAnimationFrame() 运行在后台标签页或者隐藏的 <iframe> 里时，requestAnimationFrame() 会被暂停调用以提升性能和电池寿命。window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。备注： 若你想在浏览器下次重绘之前继续更新下一帧动画，那么回调函数自身必须再次调用requestAnimationFrame()。
微信小程序后台传值wx.request，出现undefined
yumu的博客
04-08 4062
用数据集记录中的字段进行查询where({字段:this.data.前台输入绑定的value}) 注意：res.data[0].name，不然会输出undefined； 还有一种可能是： 后台使用string类型，前端输出undefined，可使用JSON.stringify(res.data[0].age）进行转换 http://yumud.com/搬家了！ ...
微信小程序 --- 小程序优化相关
删库跑路
04-02 1120
1. 减少this.setData的操作, 尽量将多次操作合并为一次（避免频繁操作引起CPU占用过高导致卡顿） this.setData({ a: 1 }) this.setData({ b: 2 }) // 可优化为 this.setData({ a: 1, b: 2 }) 2. 减少this.setData中的数据量（无关的数据量，在数据过大时会引起内存溢出） // 接口返回数据 let ...
微信小程序 drawImage 问题
weixin_30670151的博客
08-15 1551
好久没写了，其实可写的还是挺多，主要还是懒吧... 最近公司项目使用小程序做序列帧动画，大概有 116 张图，共9.6M。 比较闲的日子里实验了一番，主要有以下几种方法， 1. css background-image + animation 2. cssbackground-position + animation 3. jsbackground-image 4.jsb...
JS 事件循环（Event Loop）
weixin_46809263的博客
10-17 127
本文将在浏览器异步执行原理和事件驱动的理解基础上，详细介绍 JavaScript 的事件循环机制以及在浏览器和 NodeJS 中的不同表现。
html5实现的跑酷类神庙逃亡小游戏源码.zip
11-04
开发者可能会使用requestAnimationFrame，这是一个浏览器提供的API，用于优化动画性能，确保每帧都在显示器刷新前绘制。 6. **碰撞检测**: 在跑酷游戏中，角色与环境的碰撞检测是至关重要的。开发者可能会使用...
微信小游戏(四)从js的定时器到requestAnimationFrame
不想起床
10-05 2381
计时器一直是JavaScript动画的核心，而编写动画循环的关键是要知道延迟时间要多长才合适，setTimeout和setInterval的问题是，他们都不精确，所以后面就有requestAnimationFrame requestAnimationFrame的用法与setTimeout很相似，只是不需要设置时间间隔， requestAnimationFrame使用一个回调函数作为参数，这个回...
JS动画requestAnimationFrame
sunset的博客
07-25 808
requestAnimationFrame,H5新出的方法  requestAnimationFrame函数,参数是一个函数,效果是在浏览器下一次刷新帧时调用这个函数 浏览器对于页面的刷新频率是 每秒60次,相当于大约17毫秒一次.(当计算机资源不足时,可能会导致刷新率降低) function f2(){ console.log("帧刷新了"); timer = reque...
面试：requestAnimationFrame为什么能优化动画性能
weixin_43964148的博客
07-17 575
面试：requestAnimationFrame为什么能优化动画性能今天面试到这个东西，我虽然知道这个是setInterval的优化。但是让我谈及原因时，我却支支吾吾说不出来。害，重新来...
Web动画优化之requestAnimationFrame的使用（翻译）
印第安米饭
11-25 370
本文翻译自：https://css-tricks.com/using-requestanimationframe/ ，如有侵权，请联系我！ 我先来一句话概括一下：这个方法就是让动画按照屏幕刷新频率执行，这样就可以显得很流畅。 引入 以前JavaScript只有一种时间间隔循环的方式：setInterval()。如果你需要以特别快的速度（不是像for循环那样极致快）重复一些内容，你可以使用set...
【小程序】 解决 Function(...) is not a function问题
热门推荐
不忘初心，坚定道路！
07-22 1万+
在小程序中，只要写了ayncawait（或者是你引入的库中写了），如果你使用了babel编译且babel的版本大于7，则会出现这个问题。
js面向对象写法中使用requestAnimationFrame报错
mongkey_king的博客
04-08 5529
js面向对象写法中使用requestAnimationFrame报错:Failed to execute 'requestAnimationFrame' on 'Window': The callback provided as parameter 1 is not a function.*/js: function parcicles() { var w = window.inne...
从微信小程序重力感应API到requestAnimationFrame探索实现
weixin_33747129的博客
01-17 866
最近做微信小程序的开发时，想做一个靠感知手机方向，使页面上节点跟随移动的动画（即重力感应视差效果）功能。结果发现微信小程序有一些坑： 微信小程序不支持html5的DeviceOrientationEvent重力感应API，而是自己实现的wx.onAccelerometerChange 这个API回调实现，频率为5次/s 在这个背景下，...
requestAnimationFrame 微信小程序
08-26
在微信小程序中，requestAnimationFrame方法的兼容性存在问题。微信小程序本身不提供requestAnimationFrame方法，而是将其实现放在了webgl canvas的上下文中。因此，只有2.7.0版本以后的机型才能使用requestAnimationFrame方法。如果你想在使用普通的canvas时，也使用requestAnimationFrame来控制画面渲染刷新，可以使用setInterval或者setTimeout来实现降级处理。以下是降级处理的代码： ```javascript (function() { var lastTime = 0; // 兼容各种浏览器 var vendors = ['ms', 'moz', 'webkit', 'o']; for(var x = 0; x < vendors.length && !window.requestAnimationFrame; x++) { window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame']; window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame']; } // 降级处理 if (!window.requestAnimationFrame) { window.requestAnimationFrame = function(callback, element) { // 保证如果重复执行callback的话，callback的执行起始时间相隔16ms var currTime = new Date().getTime(); var timeToCall = Math.max(0, 16 - (currTime - lastTime)); var id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall); lastTime = currTime + timeToCall; return id; }; } if (!window.cancelAnimationFrame) { window.cancelAnimationFrame = function(id) { clearTimeout(id); }; } }()); ``` 这段代码可以使得在微信小程序中使用requestAnimationFrame方法进行画面渲染刷新。所以在微信小程序中，要使用requestAnimationFrame方法，需要进行降级处理。同时，需要注意的是，requestAnimationFrame和setTimeout不是一回事，根据其定义，可以在不同场景下使用。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [微信小程序webgl+Three.js初试水（一）](https://blog.csdn.net/sinat_33342614/article/details/99889762)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [从微信小程序重力感应API到requestAnimationFrame探索实现](https://blog.csdn.net/weixin_33747129/article/details/89175163)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值