Skip to content

Instantly share code, notes, and snippets.

@ptbrowne ptbrowne/index.html forked from anonymous/index.html
Created Apr 28, 2016

Embed
What would you like to do?
JS Bin // source http://jsbin.com/jicajamohu
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.4.1/jasmine.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.4.1/jasmine-html.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.4.1/boot.min.js'></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.4.1/jasmine.css" />
</head>
<body>
<script id="jsbin-javascript">
console.clear();
var framerateThrottle = function (f) {
var ticking = false;
var _this, _args, _id, _lastIdCalled;
var nextCall = function () {
f.apply(_this, _args);
_lastIdCalled = _id;
lastId = _id;
};
var tick = function () {
if (ticking && _lastIdCalled !== _id) {
nextCall();
requestAnimationFrame(tick);
} else {
end();
}
};
var start = function () {
ticking = true;
tick();
};
var end = function () {
ticking = false;
_this = _args = _id = _lastIdCalled = null;
};
return function () {
_this = this;
_args = arguments;
_id = Math.random();
if (!ticking) {
start();
}
};
};
var runInNumberFrames = function (fn, n) {
var count = 0;
var start = new Date();
var w = function () {
var delta = new Date() - start;
if (count != n) {
count++;
requestAnimationFrame(w);
} else {
fn();
}
}
w();
}
describe('framerate throttle', function () {
var fn;
var res = [];
beforeEach(function () {
fn = framerateThrottle(function (x) {
res.push(x);
});
res = [];
});
it('should run the first immediately and the last', function (done) {
for (var i of [1,2,3,4,5,6,7,8,9,10]) {
fn(i);
}
expect(res.length).toBe(1);
requestAnimationFrame(function () {
expect(res.length).toBe(2);
done();
});
});
it('should be called once per frame', function (done) {
fn(0); // called immediately
fn(1); // not be called since fn(2) supersedes it
fn(2); // called
expect(res.length).toBe(1);
runInNumberFrames(function () {
expect(res.length).toBe(2);
done();
}, 2);
expect(res.length).toBe(1);
});
it('should be called once per frame 2', function (done) {
fn(0); // called immediately
fn(1); // scheduled for next frame
runInNumberFrames(function () {
fn(2);
}, 1);
expect(res.length).toBe(1);
runInNumberFrames(function () {
expect(res.length).toBe(2);
}, 1);
runInNumberFrames(function () {
expect(res.length).toBe(3);
done();
}, 2);
expect(res.length).toBe(1);
});
})
</script>
<script id="jsbin-source-javascript" type="text/javascript">console.clear();
var framerateThrottle = function (f) {
var ticking = false;
var _this, _args, _id, _lastIdCalled;
var nextCall = function () {
f.apply(_this, _args);
_lastIdCalled = _id;
lastId = _id;
};
var tick = function () {
if (ticking && _lastIdCalled !== _id) {
nextCall();
requestAnimationFrame(tick);
} else {
end();
}
};
var start = function () {
ticking = true;
tick();
};
var end = function () {
ticking = false;
_this = _args = _id = _lastIdCalled = null;
};
return function () {
_this = this;
_args = arguments;
_id = Math.random();
if (!ticking) {
start();
}
};
};
var runInNumberFrames = function (fn, n) {
var count = 0;
var start = new Date();
var w = function () {
var delta = new Date() - start;
if (count != n) {
count++;
requestAnimationFrame(w);
} else {
fn();
}
}
w();
}
describe('framerate throttle', function () {
var fn;
var res = [];
beforeEach(function () {
fn = framerateThrottle(function (x) {
res.push(x);
});
res = [];
});
it('should run the first immediately and the last', function (done) {
for (var i of [1,2,3,4,5,6,7,8,9,10]) {
fn(i);
}
expect(res.length).toBe(1);
requestAnimationFrame(function () {
expect(res.length).toBe(2);
done();
});
});
it('should be called once per frame', function (done) {
fn(0); // called immediately
fn(1); // not be called since fn(2) supersedes it
fn(2); // called
expect(res.length).toBe(1);
runInNumberFrames(function () {
expect(res.length).toBe(2);
done();
}, 2);
expect(res.length).toBe(1);
});
it('should be called once per frame 2', function (done) {
fn(0); // called immediately
fn(1); // scheduled for next frame
runInNumberFrames(function () {
fn(2);
}, 1);
expect(res.length).toBe(1);
runInNumberFrames(function () {
expect(res.length).toBe(2);
}, 1);
runInNumberFrames(function () {
expect(res.length).toBe(3);
done();
}, 2);
expect(res.length).toBe(1);
});
})</script></body>
</html>
console.clear();
var framerateThrottle = function (f) {
var ticking = false;
var _this, _args, _id, _lastIdCalled;
var nextCall = function () {
f.apply(_this, _args);
_lastIdCalled = _id;
lastId = _id;
};
var tick = function () {
if (ticking && _lastIdCalled !== _id) {
nextCall();
requestAnimationFrame(tick);
} else {
end();
}
};
var start = function () {
ticking = true;
tick();
};
var end = function () {
ticking = false;
_this = _args = _id = _lastIdCalled = null;
};
return function () {
_this = this;
_args = arguments;
_id = Math.random();
if (!ticking) {
start();
}
};
};
var runInNumberFrames = function (fn, n) {
var count = 0;
var start = new Date();
var w = function () {
var delta = new Date() - start;
if (count != n) {
count++;
requestAnimationFrame(w);
} else {
fn();
}
}
w();
}
describe('framerate throttle', function () {
var fn;
var res = [];
beforeEach(function () {
fn = framerateThrottle(function (x) {
res.push(x);
});
res = [];
});
it('should run the first immediately and the last', function (done) {
for (var i of [1,2,3,4,5,6,7,8,9,10]) {
fn(i);
}
expect(res.length).toBe(1);
requestAnimationFrame(function () {
expect(res.length).toBe(2);
done();
});
});
it('should be called once per frame', function (done) {
fn(0); // called immediately
fn(1); // not be called since fn(2) supersedes it
fn(2); // called
expect(res.length).toBe(1);
runInNumberFrames(function () {
expect(res.length).toBe(2);
done();
}, 2);
expect(res.length).toBe(1);
});
it('should be called once per frame 2', function (done) {
fn(0); // called immediately
fn(1); // scheduled for next frame
runInNumberFrames(function () {
fn(2);
}, 1);
expect(res.length).toBe(1);
runInNumberFrames(function () {
expect(res.length).toBe(2);
}, 1);
runInNumberFrames(function () {
expect(res.length).toBe(3);
done();
}, 2);
expect(res.length).toBe(1);
});
})
@QuentinRoy

This comment has been minimized.

Copy link

commented Feb 16, 2017

What is the point of lastId line 25?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.