基于PNotify.js的消息提示Demo(轮询)

需求:有些任务需要定时更新,获取最新的消息,这样就需要定时轮询,再者需要一种友好的提示。

以下就是使用PNotify插件的消息提示:

1、HTML代码


<!DOCTYPE html>
<html>
    <head>
        <title>Demo</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="css/bootstrap.css">
        <link rel="stylesheet" href="css/pnotify.css">
        <link rel="stylesheet" href="css/pnotify.brighttheme.css">
        <link rel="stylesheet" href="css/pnotify.history.css">
        <link rel="stylesheet" href="css/pnotify.buttons.css">
        

        <script type="text/javascript" src="js/require.js"></script>
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/pnotify.js"></script>
        <script type="text/javascript" src="js/pnotify.reference.js"></script>
        <script type="text/javascript" src="js/pnotify.history.js"></script>
        <script type="text/javascript" src="js/pnotify.buttons.js"></script>
        <script type="text/javascript" src="js/bootstrap.js"></script>
        <script type="text/javascript">
            var timmer;
            var counter = 1;
            $(function(){
                $("#button1").click(function(){
                    showNotice('你有一个新消息','此消息来源:【'+$(this).text()+'】');
                });
                $("#button2").click(function(){
                    timmer = setInterval(function(){
                        showNotice('你有一个新消息','此消息来源:【'+'定时轮询'+counter+'】','warning');
                        counter++;
                    },1000);
                });

                $("#button3").click(function(){
                    clearInterval(timmer);
                    counter = 1;
                });
            });
            
            
            //消息展示
            function showNotice(title, text, type = 'info', delay = 1000*10 ) {
                requirejs(['jquery', 'pnotify', 'pnotify.history','pnotify.buttons'], function($, PNotify){
                    PNotify.prototype.options.styling = "bootstrap3";
                    new PNotify({
                        title: title,
                        text: text,
                        type:type,
                        delay:delay,
                        hide:true, //是否自动关闭
                        mouse_reset:true,   //鼠标悬浮的时候,时间重置

                        history:{
                            history:true,
                            menu:true,
                            fixed:true,
                            maxonscreen:Infinity ,
                            labels: {redisplay: "历史消息", all: "显示全部", last: "最后一个"}
                        },
                        buttons:{
                            closer:true,
                            closer_hover:false,
                            sticker_hover:true,
                            //labels: {close: "Close", stick: "Stick"}
                        },
                    });
                });
    }
        </script>
    </head>
    <body>
        <div style="padding: 25vh 0; text-align: center;">
            <button id="button1" class="btn btn-info">弹出新窗口</button><hr>
            <button id="button2" class="btn btn-success">开始定时轮询</button><hr>
            <button id="button3" class="btn btn-warning">清除定时轮询</button>
        </div>
    </body>
</html>

2、效果图
在这里插入图片描述

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
基于timer的轮询调度是一种任务调度的方式,它通过定时器的触发来触发任务的执行。 在这种调度方法中,一个定时器会周期性地触发,并将触发事件发送给任务调度器。任务调度器根据预先设定的时间间隔来安排任务的执行顺序和时间,以实现任务的轮询调度。 基于timer的轮询调度的实现通常有以下步骤: 1. 确定需要执行的任务列表:首先,确定所有需要执行的任务,并添加到任务列表中。任务可以是周期性的或是一次性的。 2. 设置定时器:根据预设的时间间隔,设置一个定时器,使其周期性地触发。 3. 触发任务执行:当定时器触发时,任务调度器从任务列表中选择一个任务来执行。可以根据优先级、时间戳或其他条件来确定任务的执行顺序。 4. 完成任务执行:任务调度器执行任务,并等待任务的完成。 5. 更新任务列表:根据任务的执行情况,更新任务列表。如果任务已经完成,则可以从列表中移除;如果任务还未完成,则可以重新安排其执行时间或添加其他逻辑来处理任务的异常情况。 基于timer的轮询调度在许多场景中都有广泛的应用。例如,在操作系统中,可以使用定时器来调度进程的执行;在网络应用中,可以使用定时器来定期发送和接收数据;在实时系统中,可以使用定时器来实现时间关键任务的调度等等。 总而言之,基于timer的轮询调度是一种常见的任务调度方法,通过定时器的触发来触发任务的执行,可以提供简单、高效的任务调度机制。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值