使用JS限制事件处理速率

JavaScript Throttling Demo 可用于限制动画刷新频率等场合。

js

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 1630
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var ThrottleDemo = (function(doc) {
    // h/t to underscore.js formatted to work without the library
    var throttle = function(func, wait, options) {
        var timeout, context, args, result,
            previous = 0;

if (!options) {
            options = {};
        }

var later = function() {
            previous = options.leading === false ? 0 : new Date();
            timeout = null;
            result = func.apply(context, args);
            if (!timeout) {
                context = args = null;
            }
        };

var throttled = function() {
            var now = new Date();

if (!previous && options.leading === false) {
                previous = now;
            }

var remaining = wait - (now - previous);

context = this;

args = arguments;

if (remaining <= 0 || remaining > wait) {

if (timeout) {
                    clearTimeout(timeout);
                    timeout = null;
                }

previous = now;
                result = func.apply(context, args);

if (!timeout) {
                    context = args = null;
                }
            } else if (!timeout && options.trailing !== false) {
                timeout = setTimeout(later, remaining);
            }

return result;
        };

throttled.cancel = function() {
            clearTimeout(timeout);
            previous = 0;
            timeout = context = args = null;
        };

return throttled;
    };

var unthrottledCount = 0;

function unThrottled() {
        unthrottledCount += 1;
        doc.getElementById('unthrottled').textContent = unthrottledCount;
        requestAnimationFrame(unThrottled);
    }

var throttledCount = 0,
        throttled = throttle(function() {
            throttledCount += 1;
            doc.getElementById('throttled').textContent = throttledCount;
            requestAnimationFrame(throttled);
        }, 500);

doc.addEventListener('DOMContentLoaded', unThrottled);
    doc.addEventListener('DOMContentLoaded', throttled);
})(document);

编译

CSS

HTML

JavaScript Throttling Demo 可用于限制动画刷新频率等场合。

js

编辑器支持Emmet

快捷键

JavaScript Throttling Demo 可用于限制动画刷新频率等场合。

js

使用JS实现的下拉列表框多选标签控件

使用VueJS制作的颜色调和卡（色轮）

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：