javascript - Ajax jquery - 即时加载

Question

我的网站上有一个实时更新的 div。它工作正常，但用户总是必须等待 5 秒才能加载。这是我的代码:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
<script type="text/javascript">
        $(document).ready(function() {
            $.ajaxSetup({ cache: false });
            setInterval(function() {
                $('#div-id').load('/something.php');
            }, 5000);
        });
</script>

有没有一种方法可以加载，然后等待 5 秒并再次加载？不要等待 5 秒，而是加载它，然后再次等待...

谢谢

Answer 1

是的。 jQuery 的 load() 方法有一个 complete callback function作为参数:

.load( url [, data ] [, complete ] )

complete
A callback function that is executed when the request completes.

多亏了这一点，我们可以创建一个递归函数，该函数在完成后(或在本例中为 5 秒后)调用自身:

function loadContent(selector, path) {
    $(selector).load(path, function() {
        setTimeout( loadContent(selector, path), 5000 );
    });
}

loadContent('#div-id', '/something.php');

我在这里所做的是将您的内容加载逻辑移动到一个名为 loadContent 的新函数中，该函数接受一个选择器和一个路径作为其参数。然后此函数在传入的选择器上触发 load()，加载传入的路径。当内容加载完毕后，setTimeout 函数将在 5000 毫秒(5 秒)后再次触发我们的 loadContent 函数。

开始时触发 loadContent() 会立即关闭我们的函数，这意味着您无需等待 5 秒即可首次加载内容。