使用需要作为按钮属性的参数的函数来限制按钮单击 - Javascript

Question

努力想解决这个问题。我刚刚深入研究了节流、闭包和避免全局变量的世界。

我有多个按钮：

<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])

我知道 throttle 函数正在触发（控制台日志），但它似乎没有触发回调并且 throttleLock 的值仍然是 false。

请帮忙，我确定我做错了什么，我想学习。如果有任何替代尝试，请开火我洗耳恭听。

谢谢。

Answer 1

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

callback.call(this);

示例如下： https://jsbin.com/yekimaqelo/1/edit?html,js,console,output

使用需要作为按钮属性的参数的函数来限制按钮单击 - Javascript

Throttle a button click with a function that requires a parameter that is a button attribute - Javascript

javascript

performance

closures

throttling

addeventlistener