如何在事件处理程序中包含函数(及其参数），而不在页面加载时调用该函数

How can I include a function (and its parameter) within an event handler, without the function being called on page load?

本文关键字：函数 加载 调用 程序 事件处理 包含 参数      更新时间：2023-11-01

我正在重构此代码

$("#one").on("click", function() {
        if(operator === undefined) {
            firstArray.push("1");
        }
        else {
            secondArray.push("1");
        }
    });
    $("#two").on("click", function() {
        if(operator === undefined) {
            firstArray.push("2");
        }
        else {
            secondArray.push("2");
        }
    });
    $("#three").on("click", function() {
        if(operator === undefined) {
            firstArray.push("3");
        }
        else {
            secondArray.push("3");
        }
    });
    $("#four").on("click", function() {
        console.log("4");
        if(operator === undefined) {
            firstArray.push("4");
        }
        else {
            secondArray.push("4");
        }
    });
    $("#five").on("click", function() {
        console.log("5");
        if(operator === undefined) {
            firstArray.push("5");
        }
        else {
            secondArray.push("5");
        }
    });
    $("#six").on("click", function() {
        console.log("6");
        if(operator === undefined) {
            firstArray.push("6");
        }
        else {
            secondArray.push("6");
        }
    });
    $("#seven").on("click", function() {
        console.log("7");
        if(operator === undefined) {
            firstArray.push("7");
        }
        else {
            secondArray.push("7");
        }
    });
    $("#eight").on("click", function() {
        console.log("8");
        if(operator === undefined) {
            firstArray.push("8");
        }
        else {
            secondArray.push("8");
        }
    });
    $("#nine").on("click", function() {
        console.log("9");
        if(operator === undefined) {
            firstArray.push("9");
        }
        else {
            secondArray.push("9");
        }
    });
    $("#zero").on("click", function() {
        console.log("0");
        if(operator === undefined) {
            firstArray.push("0");
        }
        else {
            secondArray.push("0");
        }
    });

进入这个

function pushNumber(numberToPush) {
        if(operator === undefined) {
            firstArray.push(numberToPush);
        }
        else {
            secondArray.push(numberToPush);
        }
    }
    $("#one").on("click", pushNumber("1"));
    $("#two").on("click", pushNumber("2"));
    $("#three").on("click", pushNumber("3"));
    $("#four").on("click", pushNumber("4"));
    $("#five").on("click", pushNumber("5"));
    $("#six").on("click", pushNumber("6"));
    $("#seven").on("click", pushNumber("7"));
    $("#eight").on("click", pushNumber("8"));
    $("#nine").on("click", pushNumber("9"));
    $("#zero").on("click", pushNumber("0"));

当我尝试上面的代码时，pushNumber函数在页面加载时被调用。我知道发生这种情况是因为我放了括号，从而调用了函数。但我不知道如果不这样做，如何将参数传递给函数。

我很感激你的帮助，谢谢。

您想要做的是"curry"一个函数，或者生成一个已经添加了一些参数的新函数。

首先，我们将创建一个函数，为每个点击处理程序生成一个新函数：

function generateHandler(argument) {
    return function() {
        pushNumber(argument);
    };
}

然后，你可以这样使用它：

$("#one").on("click", generateHandler("1"));

您想要的是称为部分应用程序或currying的东西。你可以用一个更高阶的函数手动为你的案例做这件事，比如：

function pushNumber(numberToPush) 
    return function() {
        if(operator === undefined) {
            firstArray.push(numberToPush);
        } else {
            secondArray.push(numberToPush);
        }
    };
}

但是，许多实用性库也提供了一个curry或partial函数，您可以使用它来包装您的函数。

相关文章：