javascript，分配requestAnimationFrame&；取消AnimationFrame到对象的属性

在探索一些示例代码时，我发现

requestAnimationFrame

。第1版是用它雕刻而成，效果很好。搜索了一段时间后，我也找到了

cancelAnimationFrame

，想同时使用它们。所以我做了一个测试的虚拟页面。第二版是用它雕刻的

问题是，它不会循环。所以，我有两个问题

是否无法以这种方式使用

requestAnimationFrame

？若然，原因为何

如果有可能，但我做得不对，我怎么能做到呢

这是一个重复的（）。但我还是要更详细地回答我自己的问题，因为这样可以帮助其他人以不同的方式理解这件事。

以这种方式使用requestAnimationFrame是不可能的吗？若然，原因为何

这是不可能的

如果有可能，但我做得不对，我怎么能做到呢

通过使用

call（）

和

bind（）

和

apply（）

方法，可以很容易地解决这个问题

//
// version 1
//
var requestAnimFram = (function(){
    return window.requestAnimationFrame    ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame    ||
        window.oRequestAnimationFrame      ||
        window.msRequsetAnimationFrame     ||
        function(callback){
            window.setTimeout(callback, 1000 / 60);
        }
})();

//version 1 usage
function main(){
    //main loop
    ...
    requestAnimFram(main);
}
main();

//
// version 2
//
var animFram = {
    req: window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        function(callback){
            window.setTimeout(callback, 1000 / 60);
        },
    ccl: window.cancelAnimationFrame ||
        window.mozCancelAnimationFrame,
    myReq: 0
};

//version 2 usage
function main(){
    ...
    aniFram.myReq = aniFram.req(main);
}
main();

function stop(){
    aniFram.ccl(myReq);
}

注意这里的相似之处，所有3个方法都有一个额外的参数“window”。它们都有相同的原因：

requestAnimationFrame

是

window

对象的一种方法，需要

window

的上下文

aniFram

是一个对象。它有一个方法

req

，该方法引用

窗口。requestAnimationFrame

aniFram.req（main）

在

aniFram

的上下文中调用

window.requestAnimationFrame

，而不是

window

。这就是它不起作用的原因。让我们考虑另一个示例代码：

示例代码 这与您的代码版本2的情况完全相同。调用引用

obj1.hitman

的

obj2.hitman（）

，希望更改

obj1.target

的值，但它什么也不做。因为

obj1.hitman

所做的是执行一条语句

this.target='RIP'

。由于它是在

obj2

的上下文中执行的，因此该语句变为

obj2.target='RIP'

。obj2中没有

target

属性

调用、应用、绑定 这就是这些方法的用武之地。如果没有它们，Javascript引擎将自动确定上下文（当前对象，即aniFram、obj2）。通过将这些方法附加到代码中，现在您可以决定在哪个上下文中执行它（例如，window，obj1）

---

---

这也称为别名函数。（）

您的模块中有语法错误：

ccl:ccl，myReq:0；//删除分号

“除非我尝试扭曲它，否则效果很好。”-然后请向我们展示您如何尝试扭曲它。1）编辑问题以使其更好是很好的，但请确保不要将其更改为完全不同的问题，尤其是在已经有答案的情况下。2） 您可以通过单击（X）来删除自己的评论，您可以将我的评论标记为“过时”，但我自己删除它们会更容易。@Nathan P.请删除您的评论好吗？谢谢。@Bergi一切都完成了：）

//Using call()
//Attach call method during invocation
aniFram.req.call(window, main);

//Using bind()
//Attach bind method during the object initialization
aniFram = {
    req: requestAnimationFrame.bind(window)
    ...
}
aniFram.req(main);

//Using apply()
//Attach apply method during invocation
aniFram.req.apply(window, [main]);

var obj1 = {
    target: 'Jake',
    hitman: function(){
        this.target = 'RIP';
    }
};
var obj2 = {
    //assigns obj1.hitman to obj2.hitman
    hitman: obj1.hitman
};  
obj2.hitman();
console.log(obj1.target); //outputs 'Jake'

/////////////////////////////////////////
//call() method
obj2.hitman.call(obj1);
console.log(obj1.target); //outputs 'RIP'

//apply() method
obj2.hitman.apply(obj1);
console.log(obj1.target); //outputs 'RIP'

//bind() method
var obj2 = {
    hitman: obj1.hitman.bind(obj1)
};
obj2.hitman();
console.log(obj1.target); //outputs 'RIP'