Sự kiện nhấp hoãn sự kiện

Question

Tôi đang tự hỏi liệu có cách đơn giản để trì hoãn sự kiện nhấp không được xử lý trong một khoảng thời gian được chỉ định hay không. Ví dụ: chúng tôi có thể có

$('#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 
}); 

Vì vậy, trong trường hợp này, chức năng không đồng bộ sẽ được đảm bảo một khoảng thời gian để chạy. Nếu nó đã không hoàn thành công việc của nó trong thời gian này tôi sẽ không quan tâm và chỉ muốn tiếp tục với quá trình chuyển đổi trang. Tôi biết rằng có thể thực hiện điều gì đó gần với

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

Nhưng điều này chỉ hoạt động khi liên kết được nhấp vào một trang đầy đủ. Tôi muốn để có thể đối phó với các liên kết được sử dụng cho các cuộc gọi ajax (mà không thay đổi url) là tốt.

Tôi nhận thấy rằng thư viện mixpanel có hàm track_links dường như thực hiện độ trễ khi chuyển trang, mặc dù hàm đó dường như không hoạt động tốt với hỗ trợ liên kết ajax mà tôi đã đề cập.

Mọi trợ giúp sẽ tuyệt vời! Cảm ơn.

Chỉnh sửa: Vì vậy, tôi cho rằng câu hỏi của tôi không rõ ràng, vì vậy tôi sẽ cố gắng cung cấp thêm một số chi tiết bên dưới.

Tôi không quan tâm nếu chức năng async kết thúc chạy! Tôi chỉ muốn đảm bảo rằng nó có một khoảng thời gian nhất định để thực thi, sau đó tôi không quan tâm liệu nó có kết thúc hay không và muốn tiếp tục với quá trình chuyển đổi trang.

tức là tôi muốn trì hoãn không bắt đầu chức năng async, nhưng bắt đầu quá trình chuyển đổi trang. Hàm async sẽ bắt đầu chạy ngay khi nhấp chuột xảy ra.

Hy vọng điều này rõ ràng hơn một chút!

Answer 1

Vì vậy, cuối cùng tôi đã tìm ra cách để giải quyết vấn đề tôi đặt ra, và tôi đang cung cấp nó ở đây trong trường hợp bất kỳ ai khác có cùng vấn đề và đang tìm kiếm giải pháp.

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; 
    } 
} 

Về cơ bản khi người dùng nhấp vào liên kết, nó nội bộ ngăn rằng nhấp chuột từ thực sự có bất kỳ tác dụng, và cung cấp cho các chức năng không đồng bộ một khoảng thời gian để làm điều đó là công việc trước khi thực hiện một nhấp chuột thứ hai vào liên kết mà ứng xử bình thường.

Answer 2

window.setTimeout sẽ thực thi bất kỳ chức năng cụ thể nào sau một độ trễ được chỉ định.

Bạn muốn gọi nó là như thế này:

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

Nhưng tôi phải tự hỏi tại sao bạn cần phải làm điều này. Bạn đang cố giải quyết vấn đề gì? Thường trì hoãn các công cụ không thực sự giải quyết bất cứ điều gì.

Answer 3

Hãy thử 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(); 
}); 

Nhưng nếu đó là một chức năng không đồng bộ bạn đang nói về, không có gì bảo đảm rằng chức năng này sẽ hoàn thành thi công trong khoản tiền nhất định của thời gian.

Đặt cược tốt nhất của bạn là thực hiện chức năng trên gọi lại của phương thức Asyn.

Answer 4

setTimeout cho phép bạn làm chậm đang chạy bằng cách tuy nhiên nhiều ms bạn muốn

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

Trên thực tế, nếu bạn đang làm việc với ajax bạn muốn trả lời khi cuộc gọi ajax hoàn tất. Nó có thể mất nhiều hơn hoặc ít hơn 1000ms. $.ajax cho phép bạn làm điều này với phương pháp .done().Đây là một ví dụ từ các tài liệu:

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

Answer 5

Bạn đang rơi vào cái bẫy lâu đời nhất trong JavaScript: trì hoãn một cái gì đó với hy vọng nó sẽ thực hiện sau khi một cuộc gọi chức năng không đồng bộ đã hoàn thành.

Đừng làm điều đó: sử dụng gọi lại hoặc promise. Bạn không thể biết được cuộc gọi someAsynchronousFunction(); sẽ mất bao lâu, cho dù bạn có thử nghiệm bao nhiêu.

Mà không biết những gì funciton là, thật khó để đề nghị một câu trả lời, nhưng hãy nhìn vào jQuery's .done()

Answer 6

Tôi đã thêm "lá cờ" để @ đang Sushanth của:

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 
}); 

Nếu someAsynchronousFunction() trả về mọi thứ trừ false bạn có thể thử làm theo cách này.

Answer 7

Chức năng ajax của jQuery cung cấp chính xác những gì bạn đang tìm kiếm. Bạn có thể định nghĩa một hàm gọi lại để chạy sau yêu cầu ajax của bạn.

Something như thế này:

$('#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; 
     } 
    }); 
}); 

Bạn có thể muốn sử dụng ajaxStop thay vì hoàn, nó có vẻ như động lực của bạn để trì hoãn chuyển hướng là bởi vì bạn có một loạt các công cụ đồng bộ xảy ra và bạn muốn đảm bảo tất cả nội dung ajax của bạn hoàn tất trước khi bạn điều hướng đến trang đó.

Bất kể tôi muốn khuyên bạn nên xem http://api.jquery.com/Ajax_Events/ (một trang tài liệu rất hữu ích).