Javascript函数只运行一次？尝试多次使用同一函数

正如标题所说，我试图在同一页面上多次使用相同的javascript函数。基本上，我有两个单独的下拉列表，通过ajax调用用户，这样即使是新用户也会出现。（该网站是基于不必总是重新加载。）无论如何，我目前的设置方式是这样的

Javascript:

function getAllUsers() {
        (function getAllUsers() {
            $.ajax({
                url: 'staff/getAllUsers.php',
                success: function(data) {
                    $('#getAllUsers').html(data);
                },
                complete: function() {
                    // Schedule the next request when the current one's complete
                    setTimeout(getAllUsers, 5000);
                }
            });
        })();
    }
    getAllUsers();

function getAllUsers2() {
    (function getAllUsers2() {
        $.ajax({
            url: 'staff/getAllUsers.php',
            success: function(data) {
                $('#getAllUsers2').html(data);
            },
            complete: function() {
                // Schedule the next request when the current one's complete
                setTimeout(getAllUsers2, 5000);
            }
        });
    })();
}
getAllUsers2();

我确信这样做是不现实的，因此我现在要求一些指导

这是下拉列表中的当前HTML设置：

<select class="select2" name="user" id="getAllUsers" required>
    <option selected="true" disabled="disabled">Loading Users...</option>
</select>

<select class="select2" name="user" id="getAllUsers2" required>
    <option selected="true" disabled="disabled">Loading Users...</option>
</select>

正在加载用户。。。
正在加载用户。。。

显然正在加载的用户。。。选项在加载ajax数据时被替换

不过，我相信还有更好的方法

但每当我尝试用html做类似的事情时。。。使用相同的javascript函数，第二个函数只停留在“加载用户…”

正在加载用户。。。
正在加载用户。。。

我会认为，像我目前使用多个函数的方式（所有函数都不断调用PHP文件）可能会在一段时间后导致加载时间问题，特别是如果我添加更多

---

谢谢你的帮助

两个

select2

都使用相同的端点，为什么不在相同的ajax请求中分配值呢

像这样的事情就可以了：

函数getAllUsers（）{ $.ajax({ url:'staff/getAllUsers.php'， 成功：数据=>{ $（'#getAllUsers'）.html（数据）； $（'#getAllUsers2'）.html（数据）； }, 错误：err=>{ //$（'#getAllUsers'）.html（“测试”）； //$（'#getAllUsers2'）.html（“测试”）； }, 完成：（）=>{ //在当前请求完成时安排下一个请求 设置超时（getAllUsers，5000）； } }); } getAllUsers（）

正在加载用户。。。
正在加载用户。。。

首先，您需要了解为什么它不适合您，然后找到解决方案

问题是，您在两个单独的元素中使用相同的元素ID，这并不是严格禁止的，也不会给您带来任何错误，但它指出了一个错误的实现

当您试图使用jQuery选择ID为

getAllUsers

的元素时，它知道应该只有一个这样的元素，所以它只选择第一个。将忽略具有相同ID的任何其他元素。这就是为什么它只对第一个有效

现在，让我们尝试寻找解决方案

Miroslav Glamuzina建议的一种解决方案是正确的，有效的，但不够灵活

另一种解决方案是使用选择器来选择多个不是ID的元素。最好的选择是使用元素的类，该类对于您的两个（或更多）

select

元素是唯一的。因此，如果您想在将来添加另一个，您不必接触JS代码，只需接触HTML部分

您可以这样做：

HTML

---

警告
如果计划公开使用此脚本，则应注意此脚本中的安全问题

此脚本针对XSS攻击打开。因为，您正在请求远程内容并将其内容作为HTML应用，而不进行任何数据验证或转义

在您的例子中，我建议在PHP脚本中生成一个JSON，其中包含用户列表和您需要的所有数据，然后在JavaScript上，使用JSON列表中的数据创建

选项

元素

你应该这样做：

假设这是从

staff/getAllUsers.php

收到的JSON：

[
    {"id": 14, "name": "User 1"},
    {"id": 16, "name": "User 2"},
    {"id": 17, "name": "User 3"}
]

JavaScript:

(function getAllUsers() {
    $.ajax({
        url: 'staff/getAllUsers.php',
        success: function(data) {
            try {
                const list = JSON.parse(data); // Parse JSON from string to object
                const selectEl = $('.getAllUsers').empty(); // Clear the content of both `select` elements
                for ( let i=0; i<list.length; i++ ) { // Loop through each item in the JSON array
                    $('<option />') // Create an `option` element
                        .attr('value', list[i].id) // Set attribute `value` to `option` element
                        .text(list[i].name) // Set `option` text (this function also escapes any special characters, which prevents potential XSS attacks)
                        .appendTo(selectEl); // Add `option` element to both `select` elements
                }
            } catch (e) {
                // Report any errors with the JSON parsing process to the developer console.
                console.error(e);
            }
        },
        error: function(jqXHR, textStatus, errorThrown) {
            // Track any errors received from the server for debugging purposes
            console.error(textStatus, errorThrown);
        }
        complete: function() {
            // Schedule the next request when the current one's complete
            setTimeout(getAllUsers, 5000);
        },
        dataType: 'json' // Expect a `json` back from server
    });
}());

（函数getAllUsers（）{
$.ajax({
url:'staff/getAllUsers.php'，
成功：功能（数据）{
试一试{
const list=JSON.parse（data）；//将JSON从字符串解析到对象
const selectEl=$（'.getAllUsers'）.empty（）；//清除两个'select'元素的内容
对于（让i=0；i为什么你在一个生命中有一个同名的函数？这意味着要做什么？@JackBashford一直想删除它，只是有其他更大的事情要做。哈哈。我知道它不应该在atm中。将id作为参数传递？你试图对两个不同的元素使用相同的标记id，但相同的id只能出现一次n您的DOM树。谢谢！这解决了我的问题。很高兴能提供帮助，glhf:）
(function getAllUsers() {
    $.ajax({
        url: 'staff/getAllUsers.php',
        success: function(data) {
            $('.getAllUsers').html(data);
        },
        complete: function() {
            // Schedule the next request when the current one's complete
            setTimeout(getAllUsers, 5000);
        }
    });
}());

[
    {"id": 14, "name": "User 1"},
    {"id": 16, "name": "User 2"},
    {"id": 17, "name": "User 3"}
]

(function getAllUsers() {
    $.ajax({
        url: 'staff/getAllUsers.php',
        success: function(data) {
            try {
                const list = JSON.parse(data); // Parse JSON from string to object
                const selectEl = $('.getAllUsers').empty(); // Clear the content of both `select` elements
                for ( let i=0; i<list.length; i++ ) { // Loop through each item in the JSON array
                    $('<option />') // Create an `option` element
                        .attr('value', list[i].id) // Set attribute `value` to `option` element
                        .text(list[i].name) // Set `option` text (this function also escapes any special characters, which prevents potential XSS attacks)
                        .appendTo(selectEl); // Add `option` element to both `select` elements
                }
            } catch (e) {
                // Report any errors with the JSON parsing process to the developer console.
                console.error(e);
            }
        },
        error: function(jqXHR, textStatus, errorThrown) {
            // Track any errors received from the server for debugging purposes
            console.error(textStatus, errorThrown);
        }
        complete: function() {
            // Schedule the next request when the current one's complete
            setTimeout(getAllUsers, 5000);
        },
        dataType: 'json' // Expect a `json` back from server
    });
}());