Day 13 | 元件状态:轮询 Polling

今天要介绍的功能 Polling ,用Google 翻译出来是「轮询」,不过这个词并不常见就是了,大致上可以想像成是每一段时间执行一次,像是 JavaScript 的 setInterval()。在显示时间或是要定时读取资料时就非常的方便。透过 wire:poll,预设状态下可以每 2秒 自动发送请求到後端来更新这个区块的内容。下面就来看看实际的运作方式吧!

官方文件
我的DEMO页面

基础使用

要显示目前的服务器时间日期的话,可以透过 PHP 内建的 now() 来取得。在这边会依照预设的每两秒钟更新一次画面:

<div wire:poll>
    Current time: {{ now() }}
</div>

如果要手动调整更新的频率也是可以的,在後面加上 750ms 或是 1000ms

<div wire:poll.750ms>
    Current time: {{ now() }}
</div>

也可以定时执行某些後端的 Function

<h5 wire:poll.1000ms="addCount">
    Count: {{ $count }}
</h5>

注意:更新时会使画面重新渲染,因此像是 now() 这种 function 就会被比较快的定时更新掉。


背景执行

如果观察 DEMO 页面中的计数器,会发现浏览器不在当前页面时就会减少执行的次数,从而减少对後端的请求,如果想要在背景也继续定时产生请求可以透过 keep-alive 来达成:

<div wire:poll.keep-alive>
    Current time: {{ now() }}
</div>

元素可见时执行

有些时候需要常常更新的区块可能在页面底部(例如一页式网站),如果只要让视窗出现在使用者的画面中才产生定时请求的话,则可以加上 visible

<div wire:poll.visible></div>

<<:  计画赶不上变化的第一篇

>>:  Day 1 | 游戏开发前言

[iT铁人赛Day5]JAVA的优先顺序

上次优先顺序还没讲,今天就来讲解一下 数学的运算符号有优先顺序的差别,JAVA也有 数学符号无疑是加...

【2021法遵科技与电脑稽核专题竞赛】初赛即将开跑,欢迎师生踊跃报名!

本活动之专题竞赛,系将「电脑稽核」、「人工智慧应用於法遵与稽核」、「内控和风险管理」整合设计,用以推...

在全域宣告的let

//宣告全域变数 var v = 'global' let l = 'global' //建立fun...

【PHP Telegram Bot】Day26 - 入群欢迎机器人(2):设定欢迎讯息

如果欢迎讯息写死在程序里,临时想换还要把程序打开来改,改完还要测试,不如就直接让它能在群组里设定吧...

D20: 工程师太师了: 第10.5话

工程师太师了: 第10.5话 杂记: 电风扇致死是一个来自韩国民间的迷信。 这迷信的说法是,在密闭空...