使用requestAnimationFrame(animate) 报错了，this指向问题

最新推荐文章于 2024-06-21 08:42:30 发布
最新推荐文章于 2024-06-21 08:42:30 发布
阅读量1.7k 收藏 3
点赞数 1
分类专栏： 前端 文章标签： vue javascript vue.js html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/biubiubiuPlus/article/details/114316605
版权

实现一个功能时需要用到requestAnimationFrame()结果报错
通过bind改变this指向解决问题

1.call,applay都可以解决this指向问题但是这两种方法都是改变this指向后立即调用函数

2.bind改变this指向不会立即调用函数
在这里插入图片描述
解决：

 requestAnimationFrame(this.animate.bind(this))
biubiubiuPlus
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
JQuery的animate()方法中使用$(this)的指向问题？
lonzisng
03-11 685
以下是问题html和js: <button>开始动画</button> <div style="background:#98bf21;height:100px;width:100px;position:absolute;"> </div> <script src="jQuery v3.3.1.min.js">&lt
vue+three.js导入obj模型不显示问题
sandy_star
03-19 7355
前言：最近用vue+threre.js实现3d页面的时候，发现导入obj模型时模型在页面中显示不出来的问题。也纠结了好几天，换了好几种方式去试，到底是模型有问题还是代码有问题？真是个令人头痛的问题啊！ 一、关于obj模型存放的目录 这里我用的vue是4.x版本的。 在vue中存放obj模型必须要放在静态资源（static）文件下，否则会出错。 由于4.x版本的vue没有static这个文件夹，但是他的静态资源文件夹是叫public，这样我在public下面创建一个文件夹叫static，再在static.
js面向对象写法中使用requestAnimationFrame报错
mongkey_king的博客
04-08 5486
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...
前端开发必备：requestAnimationFrame、setInterval、setTimeout——功能解析与优劣对比
在这里，我分享我的技术心得、项目经验、实用的技术教程、深入的技术分析以及前端开发的最新动态，希望能帮助到更多的人。
06-21 3771
它会将回调函数加入到浏览器下一次重绘之前要执行的队列中。setInterval：与 setTimeout 类似，setInterval 也会将要执行的代码或函数放入事件循环队列中，但它在指定的时间间隔后会一直重复执行，直到 clearInterval 被调用或窗口被关闭。函数节流：在高频率事件(resize,scroll等)中，为了防止在一个刷新间隔内发生多次函数执行，使用requestAnimationFrame可保证每个刷新间隔内，函数只被执行一次，这样既能保证流畅性，也能更好的节省函数执行的开销。
javascript在class中使用requestAnimationFrame的问题
qq_24882601的博客
07-21 920
我们都知道requestAnimationFrame是用于做动画的，它可以根据系统性能自动定时的时间，让动画效果达到最流畅，用法也简 function step() { console.log('hellow world'); window.requestAnimationFrame(step); } window.requestAnimationFrame(step); 这样控制台就会一直打印‘hellow world’了，想要取消的话也很简单，因为window.requestAni.
requestAnimationFrame，Web中写动画的另一种选择
weixin_33912638的博客
02-13 145
HTML5/CSS3时代，我们要在web里做动画选择其实已经很多了: 你可以用CSS3的animattion+keyframes; 你也可以用css3的transition; 你还可以用通过在canvas上作图来实现动画，也可以借助jQuery动画相关的API方便地实现; 当然最原始的你还可以使用window.setTimout()或者window.setInterval()通过不断更新元...
requestAnimationFrame
热门推荐
不怕万人阻挡，只怕自己投降
08-31 1万+
  requestAnimationFrame requestAnimationFrame是浏览器用于定时循环操作的一个接口，类似于setTimeout，主要用途是按帧对网页进行重绘。 设置这个API的目的是为了让各种网页动画效果（DOM动画、Canvas动画、SVG动画、WebGL动画）能够有一个统一的刷新机制，从而节省系统资源，提高系统性能，改善视觉效果。代码中使用这个API，就是告诉...
2018春招前端面试: 闯关记(精排精校) | 掘金技术征文
CRPER
03-13 6427
前言 去年年末研发组解散失业, so选择回去学车了,也顺利拿到了驾照 最近回归大深圳….开始踏上漫漫的找工作之路; “拉勾上吊一百年不匹配!!!”,”BOSS直聘日夜没反应!!!” 题目范围涵盖我最近遇到的笔试题和面谈的(CSS/JS/HTTP/Node/Hybrid/Vue/NG/React) emm…..这里不列举哪些公司了, 若是你完整的阅读一...
中级前端面试题
weixin_46024123的博客
08-18 771
面试题三高级 一、JavaScript高级 判断以下程序的输出结果: var age=100; function test(){ this.age=50; return function(){ return this.age; } } var m=new test(); alert(m()); var n=test(); alert(n()); 答案： 100 50 1.构造函数一旦返回一个对象，就不再创建新对象 2.m获得的是function(){ return this.age; } 3.n=tes
js面试题
wythhhhh的博客
08-27 33
var是ES5 语法，let const 是ES6语法;var 有变量提升（有变量的定义，但没有赋值）
3、JS基础知识-前端面试
shixue7758的博客
05-31 322
文章目录1、 1、
JavaScript requestAnimationFrame动画详解
10-19
主要为大家详细介绍了JavaScript requestAnimationFrame动画，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JS 动画基础: 细说 requestAnimationFrame
超悠閒的博客
03-30 638
JS 动画基础: 细说 requestAnimationFrame 文章目录JS 动画基础: 细说 requestAnimationFrame简介参考完整示例代码正文`setInterval` 实现动画`setInterval` 的限制`requestAnimationFrame` 实现动画rAF 基础实现rAF 定时调用：timestamprAF 取消回调：`cancelAnimationFrame`渲染、动画分离最终封装版本`requestAnimationFrame` 特性 & 使用注意事项结
微信小游戏开发-遇到的错误
qq_46670586的博客
02-09 300
微信小游戏开发时遇到的错误，如图片的显示，帧循环，事件处理等，主要对window.requestAnimationFrame(loop, canvas)函数和canvas.addEventListener('touchstart', touchEventHandler)函数的学习
requestAnimationFrame 使用
weixin_34194379的博客
03-28 197
1、概述 参考网址：https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestAnimationFrame window.requestAnimationFrame() 参数是一个回调函数。 回调的次数建议每秒60次。 这个回调函数只有一个传参，DOMHighResTimeStamp，指示requestAnimationF...
requestAnimationFrame(animate);
最新发布
07-26
`requestAnimationFrame(animate)` 是一个 JavaScript 函数，用于在浏览器重绘帧时安排动画执行。它可以帮助优化动画性能，因为它会在浏览器渲染下一帧之前运行回调函数 `animate`，避免不必要的计算，减少 CPU 负担。 ### 使用示例： 假设我们要创建一个简单的旋转动画效果，可以通过下面的方式实现： ```javascript let angle = 0; // 初始角度 function animate(timeStamp) { requestAnimationFrame(animate); angle += 0.1; // 每帧增加的角度 const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d'); // 清除当前画布 ctx.clearRect(0, 0, canvas.width, canvas.height); // 绘制新的图形 drawCircle(ctx); } function drawCircle(ctx) { ctx.beginPath(); ctx.arc(canvas.width / 2, canvas.height / 2, 50, 0, (angle * Math.PI) / 180); ctx.fillStyle = '#FF0000'; ctx.fill(); } // 初始化动画并设置定时器 const canvas = document.createElement('canvas'); document.body.appendChild(canvas); canvas.id = 'myCanvas'; window.requestAnimationFrame(animate); ``` ### 相关问题 - 示例: 1. **如何停止或取消已注册的 `requestAnimationFrame` 动画？** 可以通过调用 `cancelAnimationFrame` 来取消已经注册的动画。通常情况下，`requestAnimationFrame` 返回一个 ID，可以使用这个 ID 和 `cancelAnimationFrame` 参数来取消动画。 ```javascript let animationId; function startAnimation() { animationId = requestAnimationFrame(animate); } function stopAnimation() { cancelAnimationFrame(animationId); } ``` 2. **`requestAnimationFrame` 是否适用于非动画场景？** `requestAnimationFrame` 主要设计用于动画场景，但在某些特定情况下（如需要精确控制时间间隔的计时任务），也可以用于非动画场景。 3. **`requestAnimationFrame` 与 `setTimeout` 或 `setInterval` 性能比较如何？** 对于动画而言，`requestAnimationFrame` 通常比 `setTimeout` 或 `setInterval` 更高效，因为前者会更紧密地跟随浏览器的刷新周期，而后者可能在指定的时间间隔内触发，不一定完全同步于屏幕更新周期。这对于高性能的动画特别重要。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值