Home  >  Article  >  Backend Development  >  javascript - How can js or jqury wait for 10 seconds after clicking the first button before the other button can be operated?

javascript - How can js or jqury wait for 10 seconds after clicking the first button before the other button can be operated?

WBOY
WBOYOriginal
2016-10-23 00:12:511335browse

How about js or jqury? After clicking the first button, wait 10 seconds before the other button can be operated?
I made a network print control, because it has to wait for the order to be loaded before printing. If it cannot be loaded, it will only print out what it has Loaded orders. So I want to make a button query and wait 10 seconds before another print button can be clicked to print.

Reply content:

How about js or jqury? After clicking the first button, wait 10 seconds before the other button can be operated?
I made a network print control, because it has to wait for the order to be loaded before printing. If it cannot be loaded, it will only print out what it has Loaded orders. So I want to make a button query and wait 10 seconds before another print button can be clicked to print.

1. You can use the disabled method to control the second print button;

button1 is disabled by default and is operable;
button2 is disabled by default and is true and is inoperable

<code class="javascript">$('#button1').click(function(){
    //逻辑........
    setDisable();
});

function setDisable ()
{
    setTimeout(function(){
        //10秒后移除第二个按钮disabled属性
        $('#button2').removeAttr("disabled"); 
    },10000);
}</code>

2. You can also hide the second print button

<code class="javascript">$('#button1').click(function(){
    //逻辑........
    setDisable();
});

function setDisable ()
{
    setTimeout(function(){
        //十秒后显示第二个按钮
        $('#button2').css("display","block"); 
    },10000);
}</code>

setTimeout

After clicking the first button, give the other button disabled="disabled" and give it a timer. When the timer ends, disabled=false, you can try it

After clicking, then give him a timer setTimeout, and then execute another button

I don’t like what others say is too simple and difficult to understand. What I want is definitely not a short answer.

The principle is: after you click the first button, add a click event to the second button 10 seconds later

<code class="js">$('#btn-1').click(function () {
    //这里写#btn-1 点击时要执行的代码
    
    setTimeout(function(){
        $('#btn-2').click(function () {
            //这里写#btn-1 点击时要执行的代码
            
        });
    },10000);
});</code>

Suppose the buttons are A and B

<code>var $btnA = $('#btn-a');
var $btnB = $('#btn-b');
$btnB.prop('disabled',true);

$btnA.on('click',function(){
    setTimeout(function(){
        $btnB.prop('disabled',false);
    },10000);
});
$btnB.on('click',function(){
    //打印
});</code>

The key is

<code>$btnB.prop('disabled',false);</code>

If you have asynchronous code in button A and need to wait for the backend to return before enabling button B, please put the above line of code into the callback function for execution.

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn