jQuery自定义插件$.fn.check返回值为undefined问题求助

你的插件返回undefined的核心原因是异步AJAX请求的执行逻辑：

• $.post是异步AJAX请求，它会在后台发送请求，不会阻塞后续代码执行
• 你写的return 'true'/return 'false'是在$.post的回调函数里，这个回调要等到服务器响应后才会执行
• 而你的$.fn.check函数本身没有任何return语句，所以当你调用$(this).check(...)时，函数会立即执行完并返回默认的undefined，等后续AJAX回调执行时，早就没法修改之前的返回值了

下面提供两种常用的解决思路，你可以根据项目环境选择：

方案1：使用回调函数（兼容旧浏览器） #

修改插件，让它接受一个回调参数，在AJAX请求完成后把结果传递给回调：

$.fn.check=function (fieldName,fieldValue, callback) {
    const $val = $(this).val();
    $.post('proccess.php', {check:'check', fieldName:fieldName, fieldValue:fieldValue}, function (res) {
        if(res === 'true') {
            callback('true');
        } else if(res === 'false') {
            callback('false');
        }
    })
};

调用时通过回调获取结果：

$('#register input[name=name]').focusout(function () {
    $(this).check('name', $(this).val(), function(checked) {
        // 这里可以拿到最终的检查结果
        console.log('检查结果：', checked);
        // 后续逻辑写在这里，比如提示用户
    });
});

方案2：返回Promise（现代项目推荐） #

利用Promise来处理异步逻辑，代码更清晰，还能支持async/await语法：

$.fn.check=function (fieldName,fieldValue) {
    const $val = $(this).val();
    // 返回一个Promise对象
    return new Promise((resolve, reject) => {
        $.post('proccess.php', {check:'check', fieldName:fieldName, fieldValue:fieldValue}, function (res) {
            if(res === 'true') {
                resolve('true');
            } else if(res === 'false') {
                resolve('false');
            } else {
                // 处理意料之外的响应
                reject(new Error(`Unexpected response: ${res}`));
            }
        })
        // 捕获AJAX请求失败的情况
        .fail((jqXHR, textStatus) => {
            reject(new Error(`请求失败：${textStatus}`));
        });
    });
};

调用方式1：使用.then()链式调用 #

$('#register input[name=name]').focusout(function () {
    $(this).check('name', $(this).val())
        .then(checked => {
            console.log('检查结果：', checked);
            // 执行后续逻辑
        })
        .catch(error => {
            console.error('出错了：', error);
        });
});

调用方式2：使用async/await（更简洁） #

把focusout的回调改成async函数，就可以用同步写法处理异步逻辑：

$('#register input[name=name]').focusout(async function () {
    try {
        const checked = await $(this).check('name', $(this).val());
        console.log('检查结果：', checked);
        // 执行后续逻辑
    } catch (error) {
        console.error('出错了：', error);
    }
});

内容的提问来源于stack exchange，提问作者yas17