无限自调用函数答案

【问题标题】：Infinite self invoking function无限自调用函数
【发布时间】：2022-11-28 11:34:44
【问题描述】：

我正在编写一段代码，该代码应该在我的网站上随机显示查看次数。一切正常，除了它只在页面加载时运行一次。它应该在首次运行后每 10 秒更改一次视图计数。例如。页面加载后每 10 秒运行一次此代码 sn-p。我用setInterval 尝试了多种方法，但发现在这么多次尝试失败后仍然使用应该是不好的做法？

你们能指出我正确的方向吗？我已经阅读了几个小时关于 Stack overflow 的帖子，但没有人回答我的问题。我有一种感觉，我在这里忽略了一些明显的东西。

document.addEventListener('page:loaded', function() { //// Page has loaded and theme assets are ready
(function() {
    var f = function() {
        document.addEventListener('DOMContentLoaded', function() {
            // Minimum view count
            var minViews = 2;
            // Maximum view count
            var maxViews = 20;
            // Text to show after the view count number
            var text = 'people are viewing this product right now.';


            // Create the new element to display on the page
            $(".view-count").get().forEach(function(entry, index, array) {
                var $viewCountElement = Math.floor(Math.random() * (maxViews - minViews) + minViews) + ' ' + text;
                $(entry).html($viewCountElement);
            });

        });
    };
    window.setInterval(f, 10000); //10 sec interval
    f();
})();
});

【问题讨论】：

看起来您的函数只是向 DOMContentLoaded 事件添加一个事件侦听器，该事件只发生一次。您只是不断添加更多事件侦听器，但该事件再也不会发生。

标签： javascript function loops setinterval

【解决方案1】：

您可能不需要嵌套的事件侦听器。 DOMContentLoaded的回调函数中调用setInterval即可。

function elementDisplay() {
  // Minimum view count
  var minViews = 2;
  // Maximum view count
  var maxViews = 20;
  // Text to show after the view count number
  var text = 'people are viewing this product right now.';


  // Create the new element to display on the page
  $(".view-count").get().forEach(function(entry, index, array) {
    var $viewCountElement = Math.floor(Math.random() * (maxViews - minViews) + minViews) + ' ' + text;
    $(entry).html($viewCountElement);
  });

}


document.addEventListener('DOMContentLoaded', function() {
  window.setInterval(elementDisplay, 10000); //10 sec interval
});

【讨论】：