canvas rotate 3d基础

摘录自：http://www.cnblogs.com/zichi/p/4287187.html

canvas 3D旋转球

canvas 标签云

canvas 3D旋转环形球

js状态机，很有用的一种形式

var state = function () {
    this.count = 0;
    this.fun = null;
    this.nowcount = 0;

};
state.prototype = {
    load: function (count, fun) {
        this.count = count;
        this.fun = fun;
        this.nowcount = 0;
    },
    trigger: function () {
        this.nowcount++;
        if (this.nowcount >= this.count) {
            this.fun();
        }
    }
};
function method1() {
    s.trigger();
}
function method2() {
    s.trigger();
}
var s = new state();

s.load(2, function () {   //初始状态与OK后的回调
    console.log('执行完毕');
});

setTimeout(method1, 1000);
setTimeout(method2, 1000);

状态机形式一般用在多个任务同时进行的情况下，任务执行到某个阶段后去触发执行自定义的回调函数!
状态机是一种非常用的方法，可适用于多种应用场合，比如 Deferred 对象的 resolve -> done reject -> fail;

我目前能想到的是肯定能应用于抽奖效果转盘的效果。

setTimeout 的特殊应用

按钮三次快速点击才触发事件

var num = 0,
    hander = 0;
function btnClick() {
    if (hander != 0){
        clearTimeout(hander);
        hander = 0;
    }
    num++;
    if (num >= 3) {
        Run();
        num = 0;
        //num = 0;
        //console.log(num);
        clearTimeout(hander);
        hander = 0;
    }
    console.log(num);
    hander = setTimeout(function () {
        num = 0;
    }, 300);
}
function Run() {
    console.log('Run');
}

<input type="button" onclick="btnClick()" value="快速点击三次触发" />　

当很多次的点击事件触发之后，运行到setTimeout时，setTimeout会将function函数扔进队列中，
不会直接运行，只有很多次的点击事件运行完成之后，js才去询问事件队列里是否有需要运行的函数，这时才会运行setTimeout中的function函数。

快速多次点击只触发最后一次

var hander = 0;
function btnClick() {
    if (hander != 0) {
        clearTimeout(hander);
        hander = 0;
    }
    hander = setTimeout(function () {
        Run();
    }, 300);
}
function Run() {
    console.log('Run');
}

<input type="button" onclick="btnClick()" value="快速点击只触发最后一次" />

当鼠标一直点击，点击事件一直在处于运行状态的时候，队列中的setTimeout是不会触发的，只有最后不点击的时候才去询问事件队列。