Отложенное событие click

Question

Мне интересно, есть ли простой способ отсрочить событие клика от обработки в течение определенного периода времени. Например, мы могли бы иметь

$('#someElement').on('click', 'a', function(event) { 
    var duration = 1000; 
    someAsynchronousFunction(); // Start as soon as click occurs 
    ... // Code to delay page transition from taking place for duration specified 
}); 

Таким образом, в этом случае для асинхронной функции будет гарантировано определенное количество времени на запуск. Если он не завершил работу в это время, мне было бы все равно, и я хотел бы продолжить переход на страницу. Я знаю, что это можно сделать что-то близкое с

event.preventDefault(); 
... 
setTimeout(function(){ 
    window.location = $(this).attr('href'); 
}, duration); 

Но это работает только тогда, когда ссылка будучи щелкнул идет на полную страницу. Я хочу иметь дело со ссылками, которые используются для вызовов ajax (которые также не меняют URL).

Я заметил, что библиотека mixpanel имеет функцию track_links, которая, похоже, выполняет задержку при переходе на страницу, хотя эта функция, похоже, не работает с поддержкой ссылок ajax, о которых я упоминал.

Любая помощь будет замечательной! Благодарю.

Редактировать: Поэтому я полагаю, что мой вопрос не совсем ясен, поэтому я постараюсь предоставить более подробную информацию ниже.

Меня не волнует, работает ли функция асинхронной работы! Я только хочу дать ему гарантию, что у него есть определенное количество времени для выполнения, после чего мне все равно, закончится ли оно, и предпочтет продолжить переход на страницу.

Т.е. я хочу отложить не начало асинхронной функции, а начало перехода страницы. Функция async начнет работать, как только произойдет щелчок.

Надеюсь, это немного более понятно!

Answer 1

Так что, в конце концов, я выяснил, как решить проблему, которую я поставил, и я предоставляю ее здесь, если у кого-то другая проблема, и ищет решение.

var secondClick = false; 
var duration = 1000; 

$('#someElement').on('click', 'a', function(event) { 
    var that = $(this); 

    if(!secondClick) { 
     event.stopPropagation(); 
     setTimeout(function(){ 
      secondClick = true; 
      that.click(); 
     }, duration); 

     someAsynchronousFunction(); 
    } else { 
     secondClick = false; 
    } 
} 

В основном, когда пользователь нажимает на ссылку, он внутренне предотвращает щелчок от фактически не имея никакого эффекта, и дает асинхронной функцию определенное количество времени, чтобы сделать это работа, прежде чем делать второй щелчок по ссылке, которую ведет себя как обычно.

Answer 2

window.setTimeout выполнит любую заданную функцию после указанной задержки.

Вы назвали бы это так:

$('yourElement').click(function (event) { 
    setTimeout(function() { console.log('hi'); }, 1000); 
}); 

Но я должен задаться вопросом, почему вы должны это сделать. В чем проблема, которую вы пытаетесь решить? Обычно откладывание материала на самом деле ничего не решает.

Answer 3

Попробуйте setTimeout

$('#someElement').on('click', 'a', function(event) { 
    var duration = 1000; 
    setTimeout(function() { 
     // Code for click event 
     // this code will run after the duration elaspes 
    }, duration); 

    someAsynchronousFunction(); 
}); 

Но если это асинхронная функция, которую вы говорите, нет никакой гарантии, что эта функция завершит выполнение в указанный промежуток времени.

Лучше всего выполнить функцию при обратном вызове метода Asyn.

Answer 4

setTimeout позволяет отложить запуск кода с помощью однако многие мс вы хотите

setTimeout(function(){ 
    console.log('Stuff be done'); //This will be delayed for one second 
}, 1000); 

В самом деле, если вы имеете дело с AJAX вы хотите ответить, когда вызов Ajax завершена. Это может занять больше или меньше 1000 мс. $.ajax позволяет сделать это с помощью метода .done().Это пример из документации:

$.ajax({ 
    url: "test.html", 
    context: document.body 
}).done(function() { 
    $(this).addClass("done"); 
}); 

Answer 5

Вы впадая в старейшую ловушку в JavaScript: задерживая что-то в надежде, что произведет после вызова асинхронной функции завершено.

Не делайте этого: используйте обратный вызов или promise. Вы не можете знать, сколько времени займет звонок someAsynchronousFunction();, независимо от того, сколько вы проведете тестирование.

Не зная, что Funciton есть, трудно предположить ответ, но взгляните на jQuery's .done()

Answer 6

Я добавил «флаг» на @ код Сашант в:

Javascript

$('#someElement').on('click', 'a', function(event) { 
    var duration = 1000; 
    var someAsynchronousFunction_status = false; // flag 

    setTimeout(function() { 
     if (!someAsynchronousFunction_status) { 
      // this code will run after the duration elaspes but 
      // ONLY if someAsynchronousFunction() return false or nothing 
     } 
    }, duration); 

    someAsynchronousFunction_status = someAsynchronousFunction(); // redefine flag 
}); 

Если someAsynchronousFunction() возвращает что-либо, кроме false, вы можете попробовать это сделать.

Answer 7

Функциональность jQuery ajax обеспечивает именно то, что вы ищете. Вы можете определить функцию обратного вызова, которая будет запущена после вашего запроса ajax.

Что-то вроде этого:

$('#someElement').click(function(event){ 
    event.preventDefault(); 
    var loc = $(this).attr('href'); 
    $.ajax({ 
     url: "test.html", 
     complete: function(){ 
      // Handle the complete event 
      loc = $(this).attr('href'); 
      window.location.href = loc; 
     } 
    }); 
}); 

Вы можете использовать ajaxStop вместо полной, похоже, ваша мотивация для задержки навигации, потому что у вас есть куча асинхронной вещей происходит, и вы хотите, чтобы все ваши данные ajax были заполнены, прежде чем перейти к этой странице.

Независимо от того, что я рекомендовал бы посмотреть на http://api.jquery.com/Ajax_Events/ (очень полезная страница документации).