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

WBOY
Freigeben: 2016-10-23 00:12:51
Original
1330 Leute haben es durchsucht

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

回复内容:

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

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

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

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

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

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

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

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

setTimeout

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

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

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

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

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

假设按钮分别为A,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>
Nach dem Login kopieren

关键是

<code>$btnB.prop('disabled',false);</code>
Nach dem Login kopieren

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

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!