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

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

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

谢谢。

Answer 1

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

callback.call(this);

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

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

1 个答案: