javascript - 尝试在 jQuery 中随机化新闻滚动条间隔

标签 javascript jquery random intervals ticker

我有一个基于 jQuery 的滚动新闻滚动条,它使用以毫秒为单位的设置间隔来控制每个新文本部分显示之间的延迟。我想随机化延迟,以便它更接近地模仿实时新闻源的外观。

我尝试过使用一些 Math.random javascript 进行实验,其中 newsTickerInterval 参数是,但 JS 不是我的母语,我无法使其正常工作.

这是我的滚动条用来配置显示的 jQuery 函数:

$(function () {         
$(".demo2").bootstrapNews({
        newsPerPage: 4,
        autoplay: true,
        pauseOnHover: true,
        navigation: false,
        direction: 'down',
        newsTickerInterval: 3000,
        onToDo: function () {
            //console.log(this);
        }
    });       
});

任何提示或建议将不胜感激!

最佳答案

而不是使用 newsTickerInterval ,创建一个函数getNewsTickerDelay生成随机延迟间隔并使用 setTimeout 调用它每当需要时。

$(function () {         
    $(".demo2").bootstrapNews({
        newsPerPage: 4,
        autoplay: true,
        pauseOnHover: true,
        navigation: false,
        direction: 'down',
        getNewsTickerDelay: function() {
            var minimumInterval = 2000;
            var maximumInterval = 5000;
            var additionalInterval = Math.floor(
                Math.random() * (maximumInterval - minimumInterval)
            );

            return minimumInterval + additionalInterval;
        },
        onToDo: function () {
            //console.log(this);
        }
    });       
});

因此,每次调用超时时,请使用 getNewsTickerDelay 设置另一个具有随机延迟的超时。

--编辑--

正如 @Barmar 所指出的,您可能需要根据您的情况调整插件的实现并实现其内部 animate方法使用您定义的随机间隔而不是固定值。您只需要替换 self.options.newsTickerInterval在该插件的 JS 中将 self.options.getNewsTickerDelay() 。也就是说,如果您愿意改变插件的实现。

关于javascript - 尝试在 jQuery 中随机化新闻滚动条间隔,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58688617/

相关文章:

javascript - 如果对象包含 JavaScript 中的字母,如何返回对象

javascript - 在视频上叠加 DOM 元素

javascript - 调用 javascript 处理程序的正确方法

javascript - 用户界面上弹出消息

javascript - 在 JavaScript 中生成两个数字之间的随机数

javascript - React Router 匹配对象空响应问题

javascript - For循环仅将数组的最后一个值分配给事件监听器

javascript - AJAX 调用 PHP 不返回任何值

java - 打造简约的城市街道

algorithm - 在允许更新的同时从分布中随机抽样的有效算法?