使用需要参数的功能来限制按钮单击,该参数是按钮属性-Javascript

时间:2018-07-22 11:27:16

标签: javascript performance closures addeventlistener throttling

努力把我的头缠住。我刚刚进入了一个节流,关闭和避免全局变量的世界。

我有多个按钮:

<a content_name="home" class="menuLink"><span>HOME</span></a>

我想限制每个按钮的点击,直到完成getContent(出于这个问题,我们假设它将花费200毫秒)。

我的JavaScript:

function getContent(contentName) {
   //Does some things
}

// Simply throttle function

function throttle(callback, limit) {
    var throttleLock = false;
    console.log('throttling: ' + throttleLock);
    return function () {                
        if (!throttleLock) {            
            callback.call();            
            throttleLock = true;        
            setTimeout(function () {    
                throttleLock = false;   
            }, limit);
        }
    }
};

// Event listeners for the buttons

var menuButtons = document.getElementsByClassName("menuLink"); 

var menuBtnClick = function() {
    var attribute = this.getAttribute('content_name');
    getContent(attribute);
};

for (var i = 0; i < menuButtons.length; i++) {
    menuButtons[i].addEventListener('click', throttle(menuBtnClick, 500), false);
}

如果我这样重构(没有节气门功能),则一切正常,除了(显然)不节气:

for (var i = 0; i < menuButtons.length; i++) {
    menuButtons[i].addEventListener('click', menuBtnClick, 200), false);
}

日志错误为:

Uncaught TypeError: this.getAttribute is not a function
    at menuBtnClick ([this is my filename and line])
    at HTMLAnchorElement.<anonymous> ([this is my filename and line])

我知道节气门功能正在触发(控制台日志),但是它似乎并未触发回调,并且节流锁的值仍为false。

请帮助,我确定我做错了什么,我想学习。如果您有其他选择,请开除我。

谢谢。

1 个答案:

答案 0 :(得分:2)

只需将上下文应用于回调调用:

callback.call(this);   

这里是示例: https://jsbin.com/yekimaqelo/1/edit?html,js,console,output