requestAnimationFrame.js

const requestAnimFrame = (function() {
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) {
        return window.setTimeout(callback, 1000 / 60, (new Date).getTime())
    };
})();
const cancelAnimFrame = function() {
    return window.cancelAnimationFrame || window.webkitCancelAnimationFrame || window.mozCancelAnimationFrame || function(id) {
        clearTimeout(id);
    };
}();

let requestId;
let record = 0;
const interval = 1000;
const step = function(timestamp) {
    const past = timestamp - record;
    if (past >= interval) {
        console.log(past);
        record = timestamp;
    } else {
        console.log('wait');
    }
    requestId = requestAnimFrame(step);

};
requestId = requestAnimFrame(step);
$('.header-bar-main').on('click.clear', function() {
    cancelAnimFrame(requestId);
});