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

【问题标题】：Throttle a button click with a function that requires a parameter that is a button attribute - Javascript使用需要作为按钮属性的参数的函数来限制按钮单击 - Javascript
【发布时间】：2018-12-30 01:38:54
【问题描述】：

努力将我的头包裹在这个周围。我刚刚深入研究了节流、关闭和避免全局变量的世界。

我有多个按钮：

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

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

请帮忙，我确定我做错了什么，我想学习。如果有任何替代此尝试的方法，请开火，我全神贯注。

谢谢。

【问题讨论】：

标签： javascript performance closures addeventlistener throttling

【解决方案1】：

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

callback.call(this);

这是一个例子： https://jsbin.com/yekimaqelo/1/edit?html,js,console,output

【讨论】：

哇，就这样...非常感谢！我不想麻烦，但你能不能再深入一点，我不太明白它为什么有效？谢谢。