Java Script для интернет-теста скорости HTML и JS, неправильная структура
Я пытаюсь заставить этот скрипт работать, но когда я нажимаю кнопку проверки, он ничего не делает, со скриптом что-то не так, возможно, в цикле while. Идея состоит в том, чтобы загрузить одно и то же изображение 10 раз и усреднить полученную скорость загрузки.
document.querySelector('button').addEventListener('click', (e) => {
var imageLink = 'https://upload.wikimedia.org/wikipedia/commons/3/3e/Tokyo_Sky_Tree_2012.JPG',
downloadSize = 8185374,
time_start, time_end,
downloadSrc = new Image();
document.querySelector('.loader-content').classList.add('hide');
document.querySelector('.loader').classList.remove('hide');
var j= 0;
var FInalSpeed;
while (j<10) {
time_start = new Date().getTime();
console.info(time_start
var cacheImg = "?nn = " + time_start;
downloadSrc.src = imageLink + cacheImg;
console.info(downloadSrc);
downloadSrc.onload = function() {
//this function will trigger once the image loads
time_end = new Date().getTime();
var timeDuration = (time_end - time_start) / 1000;
loadedBytes = downloadSize * 8,
totalSpeed = ((loadedBytes / timeDuration) / 1024 / 1024).toFixed(2);
FinalSpeed= FinalSpeed + totalSpeed;
let i=0, speedOut;
const animate = () => {
if ( i < FinalSpeed ) {
document.querySelector('.content').innerHTML = i.toFixed(2) + '<small>Mbps</small>';
setTimeout(animate, 20);
i+=1.02;
} else {
document.querySelector('.content').innerHTML = FinalSpeed + '<small>Mbps</small>';
}
}
animate();
document.querySelector('.content').innerHTML = FinalSpeed + '<small>Mbps</small>';
document.querySelector('.loader-content').classList.remove('hide');
document.querySelector('.loader-content').classList.add('result');
document.querySelector('.loader').classList.add('hide');
document.querySelector('.content').classList.remove('hide');
e.target.innerText = 'CHECK AGAIN';
}
})
Я попробовал изменить цикл, объявив переменные, а не объявив переменные. Но я не могу понять, откуда возникла проблема, похоже, это проблема базовой структуры.
Скрипт никогда не меняет значение j, поэтому это бесконечный цикл.
ваши брекеты не подходят друг другу
Я сомневаюсь, что использование медленных функций JS и небольших изображений является надежным показателем скорости интернета. Это еще не все, например, трафик, пакеты, потери пакетов... Достойным началом было бы изучение асинхронных сценариев, использование веб-работников и поиск эффективности вашего кода. затем загрузка пакетов с выделенного сервера, а не с общедоступного сервера Википедии, где узким местом будет соединение с сервером, а не с Интернетом пользователей.
«Я пробовал изменить цикл, объявить переменные, а не объявить переменные. Но я не могу понять, откуда возникла проблема, похоже, это проблема базовой структуры» ... Вы говорите об этом так, как будто это не ваше дело. код. Откуда вы это взяли? Помимо многочисленных проблем, упомянутых в комментариях выше, очевидно ваше непонимание того, что событие onload делает для единственного экземпляра изображения в вашем (бесконечном) цикле.
Кстати, ваш код кажется немного беспорядочным, может быть, вы могли бы использовать какой-нибудь линтер (например, eslint) или средство для улучшения кода (например, prettier)? Это значительно упрощает отслеживание ошибок в коде и повышает удобство разработки. Один небольшой пример: вы определяете переменную FInalSpeed (прописная i), но затем используете переменную с именем FinalSpeed (строчная i) позже в коде. Это не совсем проблема в Javascript, но все равно усложняет внешний вид вашего кода.
@Rico Хороший улов несоответствия имен переменных (FInalSpeed), но это определенно проблема, поскольку javascript чувствителен к регистру идентификаторов.
Конечно, вы правы @GetSet .. чтобы лучше объяснить мой комментарий: явное определение переменной в Javascript не является обязательным (вы можете просто использовать ее без определения), и следующий код все равно должен работать без установки переменной. Однако в этой ситуации это действительно вызывает часть проблемы, поскольку переменная не определена глобально, а только локально для обработчика загрузки.
Использование JS-скрипта — лучший способ протестировать подключение к Интернету для пользователей. Если вы говорите о тестировании скорости синхронизации, поступающей в ваш дом, поскольку когда-то они стремились обеспечить одинаковую скорость для всех устройств, вот и сделано. через маршрутизатор или с помощью кабеля на задней панели маршрутизатора, отключив все остальные устройства, в большинстве случаев люди говорят, что моя скорость не такая, как говорит интернет-провайдер, но это так, просто неизвестно, это скорость, поступающая на маршрутизатор, а не Wi-Fi.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
здесь многое идет не так, я скажу тебе, что я рекомендую делать,
- в этом случае вам следует использовать async, чтобы использовать ожидание внутри
- установите для FinalSpeed значение 0, сильный текст (на всякий случай, если неопределенные действия...)
- измените while на for и снова используйте async/await.
- добавьте обещание дождаться этого изображения :)
- лучшее отслеживание скорости загрузки
- и обработка ошибок (очень важно) ;)
- также я усредняю скорость загрузки
код должен выглядеть так:
// Changed to an async function to use await inside
document.querySelector('button').addEventListener('click', async (e) => {
const imageLink = 'https://upload.wikimedia.org/wikipedia/commons/3/3e/Tokyo_Sky_Tree_2012.JPG';
const downloadSize = 8185374;
let FinalSpeed = 0; // Initialized FinalSpeed to 0 to fix undefined addition issue
document.querySelector('.loader-content').classList.add('hide');
document.querySelector('.loader').classList.remove('hide');
// Changed while loop to for loop to use async/await for sequential downloads
for (let j = 0; j < 10; j++) {
const time_start = new Date().getTime();
const cacheImg = "?nn = " + time_start;
const downloadSrc = new Image();
// Wrapped the onload event in a promise to await image loading
await new Promise((resolve, reject) => {
downloadSrc.onload = function() {
const time_end = new Date().getTime();
const timeDuration = (time_end - time_start) / 1000;
const loadedBytes = downloadSize * 8;
const totalSpeed = (loadedBytes / timeDuration) / 1024 / 1024;
FinalSpeed += totalSpeed; // Accumulates speed for each download
resolve(); // Resolve the promise once the image has loaded
};
downloadSrc.onerror = reject; // Handle image load errors
downloadSrc.src = imageLink + cacheImg;
});
}
FinalSpeed = (FinalSpeed / 10).toFixed(2); // Averages the speed after all downloads
document.querySelector('.content').innerHTML = FinalSpeed + '<small>Mbps</small>';
document.querySelector('.loader-content').classList.remove('hide');
document.querySelector('.loader-content').classList.add('result');
document.querySelector('.loader').classList.add('hide');
document.querySelector('.content').classList.remove('hide');
e.target.innerText = 'CHECK AGAIN'; // Ready for a new check
});
Проверьте его и сообщите мне, исправили ли он ваши ошибки.
также в JavaScript нет пробелов в имени: p
Отлично сделано (при условии, что оно работает). Не могли бы вы превратить это в работоспособный фрагмент?
Спасибо! Я новичок в JS, прошу прощения за неправильный процесс. Моя идея заключалась в том, чтобы сделать хороший HTML-спидтест, я взял готовый пример и переработал его, но возникли некоторые проблемы. После тестирования я обнаружил, что лучше всего установить значение цикла на 5 вместо 8 для более слабых соединений, но, возможно, лучше установить его выше для лучших соединений. Я думаю, что измерение будет неточным для более высоких скоростей. Вы можете использовать это, чтобы проверить, если хотите cc.free.bg
Я добавил небольшой тест для медленных соединений: if (FinalSpeed/j < 5 && j==5) j = 0;
@GetSet, может быть, да, я, конечно, посмотрю на это
Нет языка с названием
java script, естьjavaилиjavascript. не существует гипотетического «скриптового» языка, основанного на языке Java