欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  后端开发

javascript - js或jqury怎么第一个按钮点击后等待10秒另一个按钮才可以操作?

程序员文章站 2022-05-14 14:53:55
...
js或jqury怎么样第一个按钮点击后等待10秒另一个按钮才可以操作?
我做个网络打印控件,因为要等待加载完订单才打印,如果加载不完他就会只打印出他所加载出来的订单。所以我想做个按钮查询完,等待10秒后,另一个打印的按钮才可以进行点击打印。

回复内容:

js或jqury怎么样第一个按钮点击后等待10秒另一个按钮才可以操作?
我做个网络打印控件,因为要等待加载完订单才打印,如果加载不完他就会只打印出他所加载出来的订单。所以我想做个按钮查询完,等待10秒后,另一个打印的按钮才可以进行点击打印。

1、你可以使用disabled的方式来控制第二打印按钮;

button1默认disabled为false,可操作;
button2默认disabled为true,不可操作

$('#button1').click(function(){
    //逻辑........
    setDisable();
});

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

2、你也可以隐藏第二个打印按钮

$('#button1').click(function(){
    //逻辑........
    setDisable();
});

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

setTimeout

点击完第一个按钮后,给另一个按钮一个 disabled="disabled" 同时给他一个计时器,计时结束,disabled=false,可以试一下

点击后,然后给他个定时器setTimeout,再执行另一个按钮

不喜欢别人说的太简单,太不容易理解了,要的肯定不是简短的回答。

原理就是:在你点击第一个按钮后,再过10秒钟,给第二个按钮添加点击事件

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

假设按钮分别为A,B

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(){
    //打印
});

关键是

$btnB.prop('disabled',false);

如果你的按钮A中有异步代码,需要等待后端返回再启用按钮B,请将上面这行代码放到回调函数中执行。