Question

我想使用Lodash的throttle来减少滚动时的函数调用。我的代码如下：

window.addEventListener('scroll', _.throttle(() => { console.log('bam'); }), 1000);

不幸的是，这不起作用 - 我一直在bam编辑，而不是每一个都有。

我该怎么办？

CodePen：http://codepen.io/tomekbuszewski/pen/oxeOXy?editors=1111

Answer 1

df = pd.read_csv('FL_insurance_sample.csv') df.to_sql('Policy', conn)函数只应生成一次，而不是每次事件触发时都生成

＆＃13;

_.throttle

＆＃13;

 var callback = _.throttle(() => { console.log('bam')}, 10000);
    window.addEventListener('scroll', callback);

＆＃13;

div {
 height : 100px
}
div > div {
 height : 1000px
}

＆＃13;

<script src="https://cdn.jsdelivr.net/lodash/4.6.1/lodash.min.js"></script> <div> <div></div> </div>每10秒调用一次

Answer 2

您的代码中存在错误

window.addEventListener('scroll', _.throttle(() => { console.log('bam'); }, 1000));

Answer 3

var f = function() {
    console.log("bam");
}

window.addEventListener('scroll', _.throttle(f, 1000));

Answer 4

你做不需要lodash来获得合适的油门功能。节流功能的目的是减少浏览器资源，而不是应用你正在使用的更多开销。此外，我对油门功能的不同用途需要它们有许多不同的情况。这是我列出的一个“好”油门功能需要的东西。

最小开销。
自上次通话以来，如果已超过 interval MS，则立即进行函数调用。
避免执行另一个间隔 MS的执行功能。
延迟过多的事件触发，而不是完全放弃事件。
在需要时更新延迟事件，使其不会变得“陈旧”。
当限制功能延迟时，阻止事件的默认操作。
能够删除节流事件侦听器侦听器。

而且，我相信以下节流功能可以满足所有这些。

var cachedThrottleFuncs = [],
    minimumInterval = 200; // minimum interval between throttled function calls
function throttle(func, obj, evt) {
    var timeouttype = 0,
        curFunc;
    function lowerTimeoutType(f){
        timeouttype=0;
        if (curFunc !== undefined){
            curFunc();
            curFunc = undefined;
        }
    };
    return cachedThrottleFuncs[ ~(
        ~cachedThrottleFuncs.indexOf(func) || 
        ~(
          cachedThrottleFuncs.push(function(Evt) {
            switch (timeouttype){
                case 0: // Execute immediatly
                    ++timeouttype;
                    func.call(Evt.target, Evt);
                    setTimeout(lowerTimeoutType, minimumInterval);
                    break;
                case 1: // Delayed execute
                    curFunc = func.bind(Evt.target, Evt);
                    Evt.preventDefault();
            }
          }) - 1
        )
    )];
};
function listen(obj, evt, func){
    obj.addEventListener(evt, throttle(func, obj, evt));
};
function mute(obj, evt, func){
    obj.removeEventListener(evt, throttle(func, obj, evt));
}

使用示例：

listen(document.body, 'scroll', function whenbodyscrolls(){
    if (document.body.scrollTop > 400)
        mute(document.body, 'scroll', whenbodyscrolls();
    else
        console.log('Body scrolled!')
});

或者，如果您只需要添加事件侦听器，并且不需要删除事件侦听器，那么您可以使用以下更简单的版本。

var minimumInterval = 200; // minimum interval between throttled function calls
function throttle(func, obj, evt) {
    var timeouttype = 0,
        curEvt = null;
    function lowerTimeoutType(f){
        timeouttype=0;
        if (curEvt !== null){
            func(curEvt);
            curEvt = null;
        }
    };
    return function(Evt) {
        switch (timeouttype){
            case 0: // Execute immediately
                ++timeouttype; // increase the timeouttype
                func(Evt);
                // Now, make it so that the timeouttype resets later
                setTimeout(lowerTimeoutType, minimumInterval);
                break;
            case 1: // Delayed execute
                // make it so that when timeouttype expires, your function
                // is called with the freshest event
                curEvt = Evt;
                Evt.preventDefault();
        }
    };
};

默认情况下，此功能限制为每200ms最多一次调用。要将间隔更改为不同的毫秒数，只需更改minimumInterval的值。

与Lodash的节流并不奏效

4 个答案: