js 实现轮询

基本概念

• base::轮询

实现

轮询同步请求

async getObj(css: string) {
	let delay = 100;
	let count = 0;
	return new Promise(resolve => {
		let id = window.setInterval(() => {
			count += delay;
			let obj = document.querySelector(css);//非异步目标
			if (obj || count >= 1000) {
				window.clearInterval(id);
				resolve(obj)
			}
		}, delay)
	})
}

轮询异步请求

• child::

  轮询异步请求

  • JS 轮询-poll-polling

  较好的方案

  • 使用链式setTimeout()而不是setInterval，保证上一个请求结束后才能执行下一个请求
    • 图示：
  • 如果请求参数可能有变更
    • 则在每次请求响应后判断参数是否有变更（[use::js判断对象相同]），如果有变更就不再继续下一次setTimeout()，并且抛弃当前相应的结果
    • 参数变更时触发新的setTimeout()
    • 代码示例：

      let currentParams={};
       
      function pollAsyncRequest(params) {
        let data await = getData(params)
        // 判断参数是否有变更
        if (JSON.stringify(currentParams) !== JSON.stringify(params)) {
          // 不触发下一次轮询
        } else {
          console.log('参数没有变更，继续下一次轮询');
          setTimeout(() => pollAsyncRequest(params), 1000);
        }
      }
       
      // 启动轮询异步请求
      pollAsyncRequest(params);
      function updatePoll(){
        currentParams = {}//设置新的参数
        pollAsyncRequest(currentParams)
      }

  • 如果轮询需要暂停和继续
    • 暂停时清除现在的计时器，继续时新的计数器
    • 请求响应后判断是否已暂停，暂停就不继续下一次计时了
  • child::react 自用轮子 轮询钩子

  指向原始笔记的链接