如何在循环中调用 javascript 函数答案

【问题标题】：How to call a javascript function inside a loop如何在循环中调用 javascript 函数
【发布时间】：2021-05-12 21:23:54
【问题描述】：

如何调用像“onload”这样的javascript函数？

我的意思是。我正在尝试调用 CountDownTimer() 函数，但我不知道该怎么做。有人可以帮我吗？

附言。 javascript函数工作正常。

在我看来，我正在尝试这种方式：

 @foreach (var item in Model.pedidosAberto)
    {
        <div class="col-lg-6 mb-4">
            <a href="#" data-toggle="modal" data-id="@item.IdPedido" data-partial="_AbertoPartial"
               data-modal="#Modal" class="card bg-success text-white text-decoration-none">
                <div class="card-body">
                    <div class="float-right">
                        <div id="countdown_@item.IdPedido"></div>
                        <script type="text/javascript">
                             CountDownTimer('06/12/2021 4:45 PM', 'countdown_@item.IdPedido');
                        </script>
                    </div>
                </div>
            </a>
        </div>
    }

在同一个视图中，我有这个：

@section scripts{
<script type="text/javascript">
    $(document).ready(function () {

        //CountDownTimer('06/12/2021 4:45 PM', 'countdown');

        function CountDownTimer(dt, id) {
            var end = new Date(dt);
            alert(end);

            var _second = 1000;
            var _minute = _second * 60;
            var _hour = _minute * 60;
            var _day = _hour * 24;
            var timer;

            function showRemaining() {
                var now = new Date();
                var distance = end - now;
                if (distance < 0) {

                    clearInterval(timer);
                    document.getElementById(id).innerHTML = 'EXPIRED!';

                    return;
                }
                //var days = Math.floor(distance / _day);
                var hours = Math.floor((distance % _day) / _hour);
                var minutes = Math.floor((distance % _hour) / _minute);
                var seconds = Math.floor((distance % _minute) / _second);

                //document.getElementById(id).innerHTML = days + 'days ';
                document.getElementById(id).innerHTML = hours + ':';
                document.getElementById(id).innerHTML += minutes + ':';
                document.getElementById(id).innerHTML += seconds;
            }

            timer = setInterval(showRemaining, 1000);
        }
    });
</script>

【问题讨论】：

CountDownTimer 不会全局公开，因为它是在传递给ready() 的函数中定义的。删除 $(document).ready(function () { 和 });。请注意，您的倒计时可能无法如您所愿，因为 a) 您传递给 new Date(string) 的日期格式不是规范中定义的格式之一，因此取决于浏览器和 b)具有 id 的元素可能还不存在（尽管它应该存在，因为您一秒钟都不会调用 showRemaining）。
更好的方法是为所有倒计时元素添加一个“倒计时”类。从您的函数中，获取所有倒计时元素，然后调用该函数。至于要传递给函数的数据，您可以将其粘贴在倒计时元素的某些属性中。 $('.countdown').each(function(){ ..在这里获取$(this)的数据并调用函数。});

标签： javascript c# asp.net

【解决方案1】：

您可以从现有脚本中获取倒计时元素，无需在 html 标记中嵌入无穷无尽的脚本。

首先给你的倒计时元素添加一个类

<div id="countdown_@item.IdPedido" class="countdown"></div>

如果您对每个元素都有一个特定的日期字符串，您可以添加一个数据属性来保存该字符串，您可以在运行该函数时检索该字符串。

<div id="countdown_@item.IdPedido" class="countdown" data-date="06/12/2021 4:45 PM"></div>

然后在您现有的文档就绪函数中，获取所有倒计时元素并使用来自该元素的数据为每个元素运行该函数。

$(document).ready(function () {
    $('.countdown').each(function() {
        var dateString = $(this).attr('data-date');
        var thisId = $(this).attr('id');

        CountDownTimer(dateString, thisId);
    }
    
    // existing code....
}

【讨论】：

【解决方案2】：

您在$(document).ready() 调用内的匿名函数中定义function CountDownTimer(....) 。因此，CountDownTimer 函数仅在匿名函数执行期间已知，并且在匿名函数结束时不再存在，这意味着您的 <div> 中的脚本在尝试时找不到它。

要解决此问题，请从 $(document).ready() 调用中删除 CountDownTimer - 或者如果其中仅此而已，则考虑仅删除 $(document).ready() 调用。

所以不要这样：

<script type="text/javascript">
    $(document).ready(function () {
        //CountDownTimer('06/12/2021 4:45 PM', 'countdown');

        function CountDownTimer(dt, id) {
            // ...
        }
    });
</script>

... 这样做：

<script type="text/javascript">
    function CountDownTimer(dt, id) {
        // ...
    }

    $(document).ready(function () {
        //CountDownTimer('06/12/2021 4:45 PM', 'countdown');
    });
</script>

【讨论】：