Observe that you call obj.draw as :

<button onclick="obj.draw()

The first time obj.draw is called, the context is different than when it called by requestAnimationFramemultiple times, as a callback function before the repaint.

So try by saving this in a variable which is outside the scope of the callback function.

Something like :

var obj = {
    //...

    draw: function () {
        var sender = this;
        var draw = function () {
            document.getElementById(sender.id).style.left = (sender.speed++) + 'px';
            window.requestAnimationFrame(draw);
        }
        draw();
    }
}

Here is an updated demo of how this would look like.

http://stackoverflow.com/questions/6065169/requestanimationframe-with-this-keyword

http://stackoverflow.com/questions/6065169/requestanimationframe-with-this-keyword的更多相关文章

  1. http://stackoverflow.com/questions/12601907/loading-google-maps-in-anonymous-function

    http://stackoverflow.com/questions/12601907/loading-google-maps-in-anonymous-function   window.gMaps ...

  2. https://stackoverflow.com/questions/51751426/failed-to-run-the-da-platform-trial-vm

    https://stackoverflow.com/questions/51751426/failed-to-run-the-da-platform-trial-vm {  "annotat ...

  3. https://stackoverflow.com/questions/40949967/running-storm-from-intellij-nimbus-error

    https://stackoverflow.com/questions/40949967/running-storm-from-intellij-nimbus-error 0down votefavo ...

  4. https://stackoverflow.com/questions/16130292/java-lang-outofmemoryerror-permgen-space-java-reflection

    https://stackoverflow.com/questions/16130292/java-lang-outofmemoryerror-permgen-space-java-reflectio ...

  5. Service vs provider vs factory 转自:http://stackoverflow.com/questions/15666048/service-vs-provider-vs-factory

    请看此链接:http://stackoverflow.com/questions/15666048/service-vs-provider-vs-factory

  6. 国外的非常好的开发提问回答的网站https://stackoverflow.com/questions

    https://stackoverflow.com/questions 可以进行搜索,在页面顶部,有搜索输入框

  7. https://stackoverflow.com/questions/3232943/update-value-of-a-nested-dictionary-of-varying-depth

    https://stackoverflow.com/questions/3232943/update-value-of-a-nested-dictionary-of-varying-depth p.p ...

  8. IIS Express 域认证问题(https://stackoverflow.com/questions/4762538/iis-express-windows-authentication)

    option-1: edit \My Documents\IISExpress\config\applicationhost.config file and enable windowsAuthent ...

  9. https://stackoverflow.com/questions/10423781/sql-data-range-min-max-category

    select phone,count(order_id) as c from table_recordgroup by phoneorder by c desc SELECT CASEWHEN (ag ...

随机推荐

  1. Requirejs之AMD规范

    一.什么是AMD规范 AMD是Asynchronous Module Definition-----异步模块定义 AMD规范定义了2个函数define()与require() 下面我们来看一下定义方法 ...

  2. LNMP-Linux下Nginx+MySQL+PHP+phpMyAdmin+eAcelerator一键安装包

    LNMP一键安装包是一个用Linux Shell编写的可以为CentOS/RadHat.Debian/Ubuntu VPS(VDS)或独立主机安装LNMP(Nginx.MySQL.PHP.phpMyA ...

  3. Redis的Python客户端redis-py

    1. 安装 1. redis-py a. 使用easy_install 1 sudo easy_install redis  b. 源码安装 1 2 3 git clone https://githu ...

  4. wkwebview a target="_blank" 打不开链接的解决方案

    - (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigatio ...

  5. ubuntu 下安装 wxpython2.8

    echo "deb http://archive.ubuntu.com/ubuntu wily main universe" | sudo tee /etc/apt/sources ...

  6. oracle数据库安装

    1.oracle10g下载完成后,选择“setup.exe”启动安装. 2.oracle主目录位置就是oracle准备安装的位置,称为"Oracle_Home".Oracle安装的 ...

  7. Leetcode: Minimum Number of Arrows to Burst Balloons

    There are a number of spherical balloons spread in two-dimensional space. For each balloon, provided ...

  8. div显示滚动条

    div显示上下左右滚动条 <div style="width:260px;height:120px; overflow:scroll; border:1px solid;"& ...

  9. Ubuntu 16.04 nvidia安装

    Ubuntu更新完NVIDIA驱动后,重启电脑进入不了系统,一直处于登录界面.后来重启电脑时发现我进入不了系统了,输入我的登录密码会发现屏幕一闪,然后又重新跳回到登录界面,就是进入了login loo ...

  10. 0506 Scrum 项目1.0

    团队名称:√3 团队目标:全力完成这次的项目 团队口号:我要改变世界,改变自己!!! 演讲稿:我们的产品 鸡汤精选 是为了解决 当下社会出现的太多的负能量使得人们的内心十分 的痛苦, 他们需要强大的正 ...