У меня этот кусок JS в моем сайте, для переключения изображения, но нужна задержка при нажатии на картинку во второй раз. Задержка должна быть 1000 мс. Так что вы бы нажмите img.jpg тогда img_onclick.jpg будут появляться. Затем вы должны нажать на изображение img_onclick.jpg затем следует задержка 1000 мс до img.jpg это еще раз показали.
Вот код:
jQuery(document).ready(function($) {
$(".toggle-container").hide();
$(".trigger").toggle(function () {
$(this).addClass("active");
$(".trigger").find('img').prop('src', 'http://localhost:8888/images/img_onclick.jpg');
}, function () {
$(this).removeClass("active");
$(".trigger").find('img').prop('src', 'http://localhost:8888/images/img.jpg');
});
$(".trigger").click(function () {
$(this).next(".toggle-container").slideToggle();
});
});
Использовать функции setTimeout()
:
var delayInMilliseconds = 1000; //1 second
setTimeout(function() {
//your code to be executed after 1 second
}, delayInMilliseconds);
Если вы хотите сделать это без функции setTimeout
: см. Этот вопрос.
setTimeout(function(){
}, 500);
Поместите ваш код внутри { }
500
= 0,5 сек.
2200
= 2,2 секунды
и т. д.
Эс-6 решение
Ниже приведен пример кода, который использует aync/ожидают есть фактическая задержка.
Есть много ограничений, и это не может быть полезным, но просто вывешивать здесь для удовольствия..
в
async function delay(delayInms) {
return new Promise(resolve => {
setTimeout(() => {
resolve(2);
}, delayInms);
});
}
async function sample() {
console.log('a');
console.log('waiting...')
let delayres = await delay(3000);
console.log('b');
}
sample();
в
Есть два (в основном используется) типа функции таймер в JavaScript функции setTimeout
и вход
(другие)
Оба этих метода имеют одинаковую сигнатуру. Они принимают вызов функции и время задержки в качестве параметра.
функции setTimeout
выполняется только один раз после задержки, в то время как вход
продолжает вызывать функцию обратного вызова каждый раз после задержки milisecs.
оба этих методов возвращает целочисленный идентификатор, который может использоваться, чтобы очистить их, прежде чем таймер истекает.
clearTimeout
и clearInterval
оба эти методы принимают идентификатор, целое число, возвращенное из вышеуказанной функции функции setTimeout
и вход
Пример:
alert("before setTimeout");
setTimeout(function(){
alert("I am setTimeout");
},1000); //delay is in milliseconds
alert("after setTimeout");
Если вы запустите приведенный выше код, вы увидите, что он предупреждает до функции setTimeout`, а затем после функции setTimeout` наконец он предупреждает - я функции setTimeout` после 1 сек (1000 мс)
Как вы можете заметить из примера в том, что функции setTimeout (...) является асинхронным, что означает, он не'т ждать таймера, чтобы получить прошло прежде чем переходить к следующему заявлению я.е предупреждение("и после того, как предыдущий метод setTimeout, то");`
Пример:
alert("before setInterval"); //called first
var tid = setInterval(function(){
//called 5 times each time after one second
//before getting cleared by below timeout.
alert("I am setInterval");
},1000); //delay is in milliseconds
alert("after setInterval"); //called second
setTimeout(function(){
clearInterval(tid); //clear above interval after 5 seconds
},5000);
Если вы запустите приведенный выше код, вы увидите, что он предупреждает перед использованием setInterval`, а затем после метода setInterval` наконец он предупреждает я через setInterval
5 раз через 1 сек (1000 мс), потому что функции setTimeout очистить таймер после 5 секунд, либо раз в 1 секунду вы получите оповещение я через setInterval
бесконечно.
Как браузер внутренне делает?
Я объясню вкратце.
Чтобы понять, что вы должны знать об очереди событий в JavaScript. Есть очередь событий, реализованные в браузере. Всякий раз, когда событие срабатывает в JS, все эти события (например, щелчок и т. д. ) добавляются в эту очередь. Если Ваш браузер не имеет ничего, чтобы выполнить это событие из очереди и выполняет их по одному.
Теперь, когда вы называете функции setTimeout
или вход
заказ обратного звонка вам зарегистрированы на таймер в браузере и он будет добавлен в очередь событие через заданное время истекает, и в конце концов JavaScript занимает событие из очереди и выполняет его.
Это происходит так, потому что движка JavaScript является однопоточным, и они могут выполнять только одно дело за раз. Таким образом, они не могут выполнить другие JavaScript и отслеживать свой таймер. Вот почему эти таймеры зарегистрированы с браузером (браузер не в одном потоке) и он может отслеживать таймер и добавить событие в очередь после таймера.
то же самое происходит на вход
только в этом случае событие добавляется снова и снова очереди через заданный интервал, пока он не будет очищен или страница браузера обновилась.
Примечание
параметр задержки при передаче этих функций является минимальной задержкой время для выполнения обратного вызова. Это происходит потому, что после того, как таймер истекает браузер добавляет событие в очередь для исполнения JavaScript-движок, но выполнение обратного вызова зависит от вашего положение события в очереди и как двигатель является однопоточным это будет исполнять все события в очереди по одному.
Следовательно, ваш обратного вызова могут иногда занять больше, чем указанная задержка будет называться специально, когда другие блоки кода нить и, не дав ей времени осознать, что's там в очереди.
И как я уже упоминал JavaScript-это один поток. Так что, если вы блокируете поток надолго.
Такой код
while(true) { //infinite loop
}
Пользователь может получить сообщение Страница не отвечает.
Для синхронизации звонков вы можете использовать метод, приведенный ниже:
function sleep(milliseconds) {
var start = new Date().getTime();
for (var i = 0; i < 1e7; i++) {
if ((new Date().getTime() - start) > milliseconds){
break;
}
}
}
Я'Лл дать мой вклад, потому что это помогает мне понять, что делаю.
Чтобы сделать автопрокрутку слайдов и 3 секунды ждать, я сделал следующее:
var isPlaying = true;
function autoPlay(playing){
var delayTime = 3000;
var timeIncrement = 3000;
if(playing){
for(var i=0; i<6; i++){//I have 6 images
setTimeout(nextImage, delayTime);
delayTime += timeIncrement;
}
isPlaying = false;
}else{
alert("auto play off");
}
}
autoPlay(isPlaying);
Помните, что при выполнении функции setTimeout (), как в этом; он будет выполняться все время вне функции, как если бы они где выполняться одновременно при условии, что в setTimeout(nextImage, delayTime);задержка времени-это статическая 3000 миллисекунд.
Что я сделал с учетом этого был добавить еще 3000 Милли/s после каждого приращения петли через delayTime += timeIncrement;`.
Для тех, кто здесь волнует то, что мой nextImage() выглядит так:
function nextImage(){
if(currentImg === 1){//change to img 2
for(var i=0; i<6; i++){
images[i].style.zIndex = "0";
}
images[1].style.zIndex = "1";
imgNumber.innerHTML = imageNumber_Text[1];
imgDescription.innerHTML = imgDescText[1];
currentImg = 2;
}
else if(currentImg === 2){//change to img 3
for(var i=0; i<6; i++){
images[i].style.zIndex = "0";
}
images[2].style.zIndex = "1";
imgNumber.innerHTML = imageNumber_Text[2];
imgDescription.innerHTML = imgDescText[2];
currentImg = 3;
}
else if(currentImg === 3){//change to img 4
for(var i=0; i<6; i++){
images[i].style.zIndex = "0";
}
images[3].style.zIndex = "1";
imgNumber.innerHTML = imageNumber_Text[3];
imgDescription.innerHTML = imgDescText[3];
currentImg = 4;
}
else if(currentImg === 4){//change to img 5
for(var i=0; i<6; i++){
images[i].style.zIndex = "0";
}
images[4].style.zIndex = "1";
imgNumber.innerHTML = imageNumber_Text[4];
imgDescription.innerHTML = imgDescText[4];
currentImg = 5;
}
else if(currentImg === 5){//change to img 6
for(var i=0; i<6; i++){
images[i].style.zIndex = "0";
}
images[5].style.zIndex = "1";
imgNumber.innerHTML = imageNumber_Text[5];
imgDescription.innerHTML = imgDescText[5];
currentImg = 6;
}
else if(currentImg === 6){//change to img 1
for(var i=0; i<6; i++){
images[i].style.zIndex = "0";
}
images[0].style.zIndex = "1";
imgNumber.innerHTML = imageNumber_Text[0];
imgDescription.innerHTML = imgDescText[0];
currentImg = 1;
}
}
Вот что я делаю, чтобы решить эту проблему. Я согласен, что это из-за ошибки синхронизации и необходимые паузы для выполнения кода.
var delayInMilliseconds = 1000;
setTimeout(function() {
//add your code here to execute
}, delayInMilliseconds);
Этот новый код будет сделать паузу на 1 секунду и время выполнения кода.
Если вам нужно обновить, это еще одна возможность:
setTimeout(function () {
$("#jsSegurosProductos").jsGrid("refresh");
}, 1000);