我正在将setInterval
代码转换为requestAnimationFrame
。我在一个类中使用它所以我需要将this
绑定到传递的函数。
当我为变量(this.raf
)分配正确的供应商函数时,我收到错误:
TypeError:'requestAnimationFrame'在没有的对象上调用 实现界面窗口。
直接调用window.requestAnimationFrame
时代码正常。任何想法为什么错误?
这是a fiddle
slideshow = (function() {
function slideshow() {
this.slideShowRunning = false;
this.slide = 0;
}
slideshow.prototype.startSlideshow = function() {
var newSlide;
this.slideShowRunning = true;
this.rafId;
this.raf = window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame ||
window.oRequestAnimationFrame;
function loop() {
// stop the loop if fn returned false
if (this.slideShowRunning !== false) {
if (this.slide < this.count - 1) {
newSlide = this.slide + 1;
}
this.loadSlide(newSlide);
// loop until cancelled
var boundLoop = loop.bind(this);
// THIS GIVES THE ERROR
this.rafId = this.raf(boundLoop);
// BUT THIS WORKS
//this.rafId = window.requestAnimationFrame(boundLoop);
}
}
var boundLoop = loop.bind(this);
boundLoop();
}
slideshow.prototype.loadSlide = function(slideNumber) {
// loading the slide
console.log(slideNumber);
}
return slideshow;
})();
ss = new slideshow();
divStart = document.getElementById("start");
divStart.onclick = function() {
ss.startSlideshow()
};