Question

我有以下功能显示文件大小和速度等下载信息。这些信息似乎每秒都会更新几次。我希望每2秒更新一次progressInfo部分，以防止显示的信息抖动。

我已经尝试过使用超时和间隔，但似乎无法让它发挥作用。

https.get(options, function (update) {
    update.on('data', function (chunk) {
        file.write(chunk);
        len += chunk.length;
        fileDownloaded = (len / 1048576).toFixed(1);
        now = Date.now(); speed = len / (now - startTime) / 1024;
        speed = ' - ' + speed.toFixed(1) + ' MB/s';

        setInterval(function() {
            progressInfo.html(fileDownloaded + ' MB of ' + speed);
        }, 2000);
    });
});

Answer 1

尝试使用lodash或下划线的节流功能。

来自下划线文档：

<强>油门

_.throttle(function, wait, [options])

创建并返回传递函数的新的受限制版本，当重复调用时，只会实际调用原始文件每等待几毫秒最多运行一次。对...有用速率限制事件发生得比你能跟上的速度要快。

function updateProgress(fileDownloaded, speed) {
    progressInfo.html(fileDownloaded + ' MB of ' + speed);
}

function throttledProgress = _.throttle(updateProgress, 2000);

https.get(options, function (update) {
    update.on('data', function (chunk) {
        file.write(chunk);
        len += chunk.length;
        fileDownloaded = (len / 1048576).toFixed(1);
        now = Date.now(); speed = len / (now - startTime) / 1024;
        speed = ' - ' + speed.toFixed(1) + ' MB/s';
        // invoked the throttled function here
        throttledProgress(fileDownloaded, speed)
    });
});

如果你不想添加一个完整的外部库来处理这个案例，那么这是一个简单的限制功能

var throttle = function(func, wait) {
  var timer;
  return function(){
    var currTime = new Date();
    var elapsed = currTime - timer;
    if (timer === undefined || elapsed > wait){
      func.apply(this, arguments);
      timer = currTime;
    }
  };
};

Answer 2

在已调用函数后，只需阻止重复的函数调用。您可以使用简单标志来检查是否应更新html或是否已启动processInfo更新。

使用setTimeout(function, milliseconds)而不是setIntervall(function, milliseconds)来执行processInfo函数的更新。

节气门功能2秒

2 个答案: