PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

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

原创
2016-10-23 00:12:51 1094浏览

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,请将上面这行代码放到回调函数中执行。

声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。