关于节流函数

最近再学习作图片懒加载,其中要做滚动函数节流,看到这样一段代码

// 简单的节流函数
//fun 要执行的函数
//delay 延迟
//time  在time时间内必须执行一次
function throttle(fun, delay, time) {
    var timeout,
        startTime = new Date();
    return function() {
        var context = this,
            args = arguments,
            curTime = new Date();
        clearTimeout(timeout);
        // 如果达到了规定的触发时间间隔,触发 handler
        if (curTime - startTime >= time) {
            fun.apply(context, args);
            startTime = curTime;
            // 没达到触发间隔,重新设定定时器
        } else {
            timeout = setTimeout(fun, delay);
        }
    };
};
// 实际想绑定在 scroll 事件上的 handler
function lazyload(event) {}
// 采用了节流函数
window.addEventListener('scroll',throttle(lazyload,500,1000));

别的都能看懂,但是里面var content=this那里没看懂,这里的this不是window吗?后面fun.apply(content,args);岂不是把funthis绑定为window;这样有什么目的? 前端小白,求指导

阅读 2.6k
2 个回答

很多工具的函数实现上都会用到this,这里我觉得主要考虑的是万一传入的fun函数,带有this的调用呢?

比如 传入的fun 绑定了this

function fn(){console.log(this.name);}
var obj={name:'d'};
var tfn = throttle(fn,0,500);
var tfn1 = throttle(fn.bind(obj),0,500);

两者结果是不一样的。这里就是 throttle在实现上做了关于this的绑定处理。

因为不一定只用到 window 上,这样写其它元素也可以使用。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题