为了账号安全,请及时绑定邮箱和手机立即绑定

关于 js 节流函数的使用问题

关于 js 节流函数的使用问题

绝地无双 2018-10-19 15:14:10
http://jsfiddle.net/haichao/f...http://jsfiddle.net/haichao/d...第一个 demo 可以正常执行,第二个 demo 没有正常执行。两个 demo 区别:btn.onclick = throttle(function () {      console.log(1) }, 1000)btn.onclick = function () {     throttle(function () {          console.log(1)     }, 1000) }另外关于 throttle 函数的实现中,return 一个 function,这个 function 并没有执行,为什么仍然执行了 fn。求解答。
查看完整描述

1 回答

?
元芳怎么了

TA贡献1798条经验 获得超7个赞

这里的关键在 throttle() 这个函数,我这里先把 throttle() 抄下来

function throttle(fn, wait) {    var timer    return function(...args) {        if (!timer) {
            timer = setTimeout(() => {
                timer = null
            }, wait)            return fn.apply(this, args)
        }
    }
}

这个函数的内部过程可以简化描述为

function throttle(fn) {    return function() {
        fn();
    };
}

就是说,它返回一个函数,而且返回的这个函数在执行的时候会调用最外面传入的 fn

第一个 demo 中,onclick 需要赋值一个函数,而 throttle() 返回的就是一个函数,所以 onclick 得到的是 function() { fn(); },点击的时候会执行这个函数,而它会调用 fn()

第二个 demo 中,onclick 得到的是 functioin() { throttle(); },点击的时候会执行 throttle(),而 throttle()所做的事情只是返回了 function() { fn(); },并没有调用它,所以在你看来它没有正常执行。


查看完整回答
反对 回复 2018-11-10
  • 1 回答
  • 0 关注
  • 605 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号