javascript 轮询_JavaScript轮询

墨蓝 2023-02-22 03:39 8阅读 0赞

javascript 轮询

Polling with JavaScript is one of those ugly but important functions within advanced front-end user experience and testing practices.  Sometimes there isn't the event you can hook into to signify that a given task is complete, so you need to get your hands dirty and simply poll for it.  Polling with JavaScript isn't difficult but it's not easy either.  Let me show you a few implementations of JavaScript polling that you can add to your toolbox!

使用JavaScript进行轮询是高级前端用户体验和测试实践中那些难看但重要的功能之一。 有时没有事件可以挂起，以表明给定任务已完成，因此您需要动手操作并简单地对其进行轮询。 用JavaScript轮询并不困难，但也不容易。 让我向您展示一些可以添加到工具箱中JavaScript轮询的实现！

## 有诺言 **(**With Promises**)** ##

Since the [Promise API][] is implemented almost all browsers today, here's a polling implementation using them:

由于[Promise API][]已在当今几乎所有浏览器中实现，因此以下是使用它们的轮询实现：

// The polling function
    function poll(fn, timeout, interval) {
        var endTime = Number(new Date()) + (timeout || 2000);
        interval = interval || 100;
    
        var checkCondition = function(resolve, reject) {
            // If the condition is met, we're done! 
            var result = fn();
            if(result) {
                resolve(result);
            }
            // If the condition isn't met but the timeout hasn't elapsed, go again
            else if (Number(new Date()) < endTime) {
                setTimeout(checkCondition, interval, resolve, reject);
            }
            // Didn't match and too much time, reject!
            else {
                reject(new Error('timed out for ' + fn + ': ' + arguments));
            }
        };
    
        return new Promise(checkCondition);
    }
    
    // Usage:  ensure element is visible
    poll(function() {
    	return document.getElementById('lightbox').offsetWidth > 0;
    }, 2000, 150).then(function() {
        // Polling done, now do something else!
    }).catch(function() {
        // Polling timed out, handle the error!
    });

The code is structured easy enough to read but it's mostly three-fold:  the conditional function which signals polling success, a conditional failure which hasn't timeout out, so we'll run again, or a failure which has run past timeout which should return an error.

该代码的结构易于阅读，但主要包含三部分：表示轮询成功的条件函数，尚未超时的有条件失败，因此我们将再次运行，或者已超过超时而出现的失败应返回错误。

## 没有延期 **(**Without Deferreds**)** ##

If you aren't using Deferreds, no worry -- polling is just about the same:

如果您不使用Deferreds，不用担心-轮询几乎是相同的：

The difference here is that there's no return value -- the callback functions take the place of the Deferred instance.

此处的区别是没有返回值-回调函数代替Deferred实例。

Polling isn't necessarily a consequence of async coding but it has definitely increased in usage and importance due to our desire to write async code.  During my time writing front-end functional tests with the Intern testing framework, I've used polling quite a bit both on the server and client sides.  This technique will always have its place so make sure you have a snippet like this available.

轮询不一定是异步编码的结果，但是由于我们希望编写异步代码，因此轮询的用途和重要性无疑得到了提高。 在使用Intern测试框架编写前端功能测试的过程中，我在服务器端和客户端使用了很多轮询。 这项技术将永远占有一席之地，因此请确保您有一个类似的代码片段。

> 翻译自: [https://davidwalsh.name/javascript-polling][https_davidwalsh.name_javascript-polling]

javascript 轮询

[Promise API]: https://davidwalsh.name/promises
[https_davidwalsh.name_javascript-polling]: https://davidwalsh.name/javascript-polling