首页 > 上网技巧 > 电脑小技巧 > JS实现简单的轮询

JS实现简单的轮询

时间:2018-08-17 10:57 作者:QQ地带 我要评论

在 JS 中实现轮询其实主要的应用场景就是:我们需要从服务器端获取一些未来一小段时间内可以确定的事情。比如最经典的场景就是:想象一个用户在网页端通过扫码进行支付,我们怎么判断用户支付的状态。
 
JS 实现
其实在 JS 中实现最简单的轮询就是使用 clearInterval(),还是说我们开头的应用场景,用户的支付状态:
 
const timeId = setInterval(() => {
 
if (paying == 'success') {
 
  clearInterval(timeId)
 
};
 
checkPaymentDone();
 
},3000)
在 setInterval 里面,我们每隔三秒就去调用 checkPaymentDone() 方法,如果在某种情况下 paying == 'success' 成立,我们就清除这个轮询。所以再看 checkPaymentDone() 的实现:
 
axios.post('/payment/check', {
 
    // 如果需要传数据,从这里传
 
}).then(response => {
 
if (response.data.finished) {
 
 paying = 'success';
 
}
 
})
那么从这个代码可以知道,也就是相当于我们每隔三秒就去请求 /payment/check,然后再根据服务器返回的数据判断如何更新 paying 这个值。
 
服务端的实现
这里举 Laravel 的例子,首先我们会有路由:
 
Route::post('/payment/check','PaymentController@check');
然后,在 PaymentController 的 check 方法中,大致的逻辑可以这个样子:
 
public function check()
 
{
 
// 判断返回的条件,一般是查询数据库
 
if (condition) {
 
  return response()->json(['finished' => true]);
 
}
 
return response()->json(['finished' => false]);
 
}
注意这里返回的 ['finished' => true] 其实是跟 checkPaymentDone() 中的代码相关联的 if (response.data.finished) 。
 
总结
轮询的应用场景是确定未来一小段时间的因素,通过循环地向服务器发请求,然后再根据服务器的返回状态清除 clearInterval()。

标签: JS
顶一下
(0)
0%
踩一下
(0)
0%

Google提供的广告