Dừng thực thi trang như chức năng alert()

Question

Khi tôi viết alert('Hello'), việc thực thi trang dừng lại và chờ phê duyệt để tiếp tục.

Tôi có thiết lập div để hiển thị dưới dạng cảnh báo giả, sử dụng HTML - div này có nút 'OK'.

Tôi muốn trang ngừng thực thi (giống như cảnh báo) cho đến khi người dùng nhấp vào 'OK'.

Có thể không?

Answer 1

Bạn không thể. Chỉ những người xây dựng đặc biệt mới có thể làm được điều đó. Trong một thời gian, có showModalDialog được xây dựng đặc biệt cho phép bạn chỉ định URI cho nội dung và do đó tùy chỉnh nó, nhưng nó chưa bao giờ được hỗ trợ rộng rãi và hiện không được chấp nhận ngay cả bởi các trình duyệt đã từng hỗ trợ nó.

Thay vào đó, hãy thực hiện chức năng cảnh báo hiện tại sử dụng div chấp nhận gọi lại khi cảnh báo được đóng (hoặc trả lại lời hứa được giải quyết khi đóng) để cho phép bạn tiếp tục xử lý.

Vì vậy, ví dụ, nếu mã của bạn sử dụng để sử dụng alert và làm việc như thế này:

function foo() { 
    var x; 

    x = doSomething(); 
    alert("Alert! Alert!"); 
    doSomethingAfterTheAlertIsCleared(x); 
    doAnotherThingAfterward(); 
} 

... bạn muốn thay đổi nó thành:

function foo() { 
    var x; 

    x = doSomething(); 
    fakeAlert("Alert! Alert!", function() { 
     doSomethingAfterTheAlertIsCleared(x); 
     doAnotherThingAfterward(); 
    }); 
} 

Lưu ý rằng bây giờ tất cả các mã mà theo sau cảnh báo là trong một chức năng, có tham chiếu chúng tôi vượt qua vào fakeAlert. Hàm foo trả về trong khi cảnh báo giả vẫn hiển thị, nhưng cuối cùng người dùng loại bỏ cảnh báo giả và gọi lại của chúng tôi được gọi. Lưu ý rằng mã gọi lại của chúng tôi có quyền truy cập vào người dân địa phương trong cuộc gọi tới số foo mà chúng tôi đã xử lý, vì cuộc gọi lại của chúng tôi bị đóng (đừng lo lắng nếu đó là cụm từ khá mới và/hoặc bí ẩn, closures are not complicated).

Tất nhiên, nếu điều duy nhất sau cảnh báo là một cuộc gọi hàm duy nhất không nhận bất kỳ đối số nào, chúng tôi chỉ có thể chuyển trực tiếp tham chiếu hàm đó. Ví dụ này:

function foo() { 
    doSomething(); 
    alert("Alert! Alert!"); 
    doSomethingAfterTheAlertIsCleared(); 
} 

trở thành:

function foo() { 
    doSomething(); 
    fakeAlert("Alert! Alert!", doSomethingAfterTheAlertIsCleared); 
} 

(Lưu ý rằng không có () sau doSomethingAfterTheAlertIsCleared - chúng tôi đề cập đến đối tượng chức năng, không gọi hàm; fakeAlert sẽ gọi nó.)

Trong trường hợp bạn không chắc chắn cách fakeAlert sẽ gọi hàm gọi lại, nó sẽ nằm trong trình xử lý sự kiện cho người dùng "đóng" div cảnh báo và bạn t gọi đối số cho cuộc gọi lại giống như bạn thực hiện với bất kỳ tham chiếu nào khác đến hàm. Vì vậy, nếu fakeAlert nhận nó là callback, bạn gọi nó bằng cách nói callback();.

Answer 2

Có thể là, tôi đã làm bản demo không chính xác và không được kiểm tra tốt mà thực hiện điều này.

khái niệm chính:

1. trong ví dụ này, chúng ta có phương pháp đăng nhập.Hãy thử() đang thực hiện phương thức Login2Process() . Login.Proceed() làm cho truy vấn AJAX và chúng tôi muốn đợi để thực thi, nhưng không muốn ràng buộc bất kỳ trình xử lý nào (chỉ cần chờ nó là window.alert())
2. thay vì thực thi chức năng trực tiếp .Tiếp tục, chúng tôi sử dụng các phương thức async() và await() trong số C#)
3. khi chúng tôi cần tạm dừng tập lệnh và chờ đợi một điều gì đó, chúng tôi ngừng thực hiện phương thức bằng cách sử dụng lệnh ném và phân tích cú pháp của người gọi phần thứ hai của nó khi phương thức chờ (không đồng bộ) đã hoàn thành việc thực thi .

gì còn lại ra khỏi phạm vi:

1. sạch đang
2. Dung dịch thử cho các trình duyệt khác nhau
3. Save/Restore biến địa phương
4. Không hoạt động cho vòng lặp.

Demo:

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 

<script> 

Login.Try(); // START!! START!! START!! 

var Login = { 
    Url: "http://xxxx", 
    Try: async(this, function (T) { 

     console.log('before login'); 

     //var success = call(this, Login.Proceed); // normal call 
     var success = await(this, Login.Proceed); // that we want! 

     console.log('after login'); 
     console.log('success ' + success); 

    }), 

    Proceed: function (callback) { 
     console.log('before ajax'); 
     $.ajax({ 
      url: this.Url, 
      context: document.body 
     }).done(function() { 
      console.log('after ajax'); 
      callback("role=admin"); 
     }); 
    } 
} 


function async(T, method){ 
    console.log('before async create'); 
    return function() { return method.apply(T); }; 
    console.log('after async create'); 
}; 

function await(T, method) { 
    var fn = arguments.callee.caller.toString(); 
    var pos = fn.indexOf('await('); 
    var allBeforeAwait = fn.substring(0, pos); 

    var pos1 = fn.indexOf('await('); 
    pos1 = fn.indexOf(',', pos1) + 1; 
    var pos2 = fn.indexOf(')', pos1); 
    var cc = fn.substring(pos1, pos2); 


    pos = allBeforeAwait.lastIndexOf(';'); 
    var allBeforeCall = allBeforeAwait.substring(0, pos + 1) + "}"; 
    var callResult = allBeforeAwait.substring(pos + 1); 

    var result = 10; 
    var allAfterCall = "("+fn.substring(0, fn.indexOf(")")) + ",V){" + callResult + "V;"; 
    pos = fn.indexOf(')', pos) + 2; 
    allAfterCall = allAfterCall + fn.substring(pos)+")"; 

    //uncomment to see function's parts after split 
    //console.debug(allBeforeCall); 
    //console.debug(cc); 
    //console.debug(allAfterCall); 

    method.apply(T, [function (value) { 
     console.log('ajax response ' + value); 
     eval(allAfterCall).apply(T, [T, value]); 
    } ]); 

    throw ""; 
}; 

</script> 

Hope demo này sẽ truyền cảm hứng cho bạn một số ý tưởng.

Ngoài ra, bạn có thể xem trên http://blogs.msdn.com/b/rbuckton/archive/2011/08/15/promise-js-2-0-promise-framework-for-javascript.aspx

Answer 3

Không thể như tỉnh táo, nhưng bạn có thể làm cho mọi việc để trông giống như một cảnh báo.

Ví dụ: bạn thực hiện một chức năng gọi hàm. :) Sau đó, bạn thực hiện một chức năng với một IF lớn.

window.callfunction = function (f, a, b) /* function name, arguments, boolean*/ 
{ 
    var handler = window[f]; 
    if (typeof handler === 'function') { 
     handler(a, b); 
    } else { 
     alert("No function like that mate, sry."); 
    } 
} 

function deleteAfterConfirm(a, b) /* arguments, boolean */ 
{ 
    if (b == true) { 
     alert("i can delete, confirmed."); 
     alert(a); 
     return false; 
    } 
    magicConfirm(a); 
} 

function magicConfirm(a) { 
    /** 
     modals, popovers, etc, anything you want, 
    **/ 
    $("#confirmModal").modal("show"); 
    /** 
     and put the function's name to the binding element's data 
    **/ 
    $("#returntrue").data("call", arguments.callee.caller.name); 
    $("#returntrue").data("arguments", a); 
    /** 
     the element like OK button in the alert 
     calls the magicConfirm function's caller function 
     with true, which is the deleteAfterConfirm, and 
     because the bool is true, it will alert i can delete... 
    **/ 
    $("#returntrue").bind("click", function() { 
     callfunction($(this).data("call"), $(this).data("arguments"), true); 
    }); 
} 


$(document).ready(function() { 
    $("#deleteAfterConfirm").on("click", function() { 
     deleteAfterConfirm("variable which is needed later."); 
    }); 
}); 

Vì vậy, bây giờ bạn có thể sử dụng hàm deleteAfterConfirm như hàm có cảnh báo() hoặc xác nhận(), vì nó tự nhớ lại phần khác nếu chính nó.

Không phải phương pháp tốt nhất, nhưng điều này bằng cách nào đó có thể thay thế xác nhận và cảnh báo để có phiên bản tìm kiếm tốt hơn. Đây là một cách của alertism giả :)

Hãy vui vẻ - R

Answer 4

Bạn có thể làm điều đó với Promise API. Đây chỉ là chia mã của bạn và đặt một số dòng trong trình nghe hành động. Đây là mã mẫu:

Trong ví dụ này, có hai nút. Nhấp vào nút đầu tiên sẽ bắt đầu một mã và phần còn lại của mã của bạn sẽ được đặt trên hàm promise.then.

Mã Html:

<body> 
    <button id='startButton' onclick='start();'>Start Button</button> 
    <button id='targetButton'>Target Button</button> 
</body> 

Script Code:

<script> 
    function start(){ 
     console.log('first log'); //put your div displayer code here 
     let promise = new Promise(function(resolve, reject) { 
      console.log('promise started'); 
      let targetButton = document.getElementById('targetButton'); 
      targetButton.addEventListener("click",function(){ 
      resolve(); 
      }); 
     }); 
     promise.then(function() { 
      console.log('second log'); //put the rest of your code 
     }); 
    } 
</script> 

Bạn sẽ thấy first log và promise started ngay sau khi kích hoạt nút bắt đầu. second log sẽ được hiển thị sau khi bạn nhấp vào nút mục tiêu.

Các nguồn lực cho Promise API:

• MDN: Mozilla Developer Network
• MSDN: Microsoft Developer Network
• A very detailed tutorial

Answer 5

Tôi nghĩ rằng đây có thể sử dụng JavaScript cơ bản. Bạn có thể có nút giả thiết như thế này:

<button id="fakeButton" value="not" onclick="fakeButtonValChange()">OK</button> 

Sau đó:

function fakeButtonValChange() { 
var fakebuttonval = document.getElementById("fakeButton").value; 
document.getElementById("fakebutton").value = 
"clicked" 
if (fakebuttonval == "clicked") { 
*place stuff to show div here (i'm not good with css and that stuff)* 
} 

Answer 6

Sử dụng 'Bootstap' modal

Sau đó, loại bỏ nút đóng và vô hiệu hóa mô hình cửa sổ ẩn bằng cách sử dụng mã dưới đây

$('#myModal').modal({backdrop: 'static', keyboard: false}) 

Kết hợp chức năng và sự kiện đóng của bạn với nút OK của cửa sổ phương thức đó.

Answer 7

Bạn có thể sử dụng mã sau để tạm dừng thực thi trong một khoảng thời gian dài.

chức năng PauseExcecution() {
// Do một số công cụ
ngủ (1000);
// Do một số nội dung ...

}

function sleep(milliseconds) { 
    var start = new Date().getTime(); 
    for (var i = 0; i < 1e7; i++) { 
    if ((new Date().getTime() - start) > milliseconds){ 
     break; 
    } 
    } 
}