Question

我几乎整天都在努力实现我创建的功能的内置倒计时。

它指的是由jQuery和ajax处理的搜索函数有input字段允许输入关键字，我对从该字段读取的事件应用了超时，因此用户提供的每个字符都会重置超时。

只要您继续提供关键字，它就不会启动ajax请求，当您停止2秒后，它会自动执行该请求。

我想要的是显示一个毫秒倒计时，显示多少＆＃34;时间＆＃34;你离开了ajax请求继续。

因为现在它仅仅2秒我希望它采用那种格式0:00 显然，每次提供新角色时倒计时都会重置。

这是HTML：

<input type="text" id="search" />
<div id="response"></div>

和脚本

var keyupTimeoutID = 0;

$('#search').on('input', function () {
    clearTimeout(keyupTimeoutID);
    keyupTimeoutID = setTimeout(function () {

        var srch = jQuery("#search").val();

        // ajax request
        alert('Handler has performer ajax request based on following keywords: ' + srch);

    }, 2000);
});

和jsFiddle

Answer 1

据我所知，setTimeout不适合您，因为每次要更新显示时需要执行一些代码（每秒几次），而此方法仅用于执行一次。当然，你可以设置一系列超时，每一次都设置下一次，但这既麻烦又不太可能准确地保持时间。

如果您需要定期执行某些操作（在这种情况下），您可以使用setInterval代替，如下所示：

<input id="search"> <span id="remainingTimeDisplay"></span>

function programCountDown(){
    $("#search").keydown(function(){
        counter.reset({
            onFinish : function(){
                alert("Time's up!");
            }
        });
    });
}

var counter = {
    interval : null,
    time : null,
    initialTime : 2000,
    stepTime : 10,
    display : null,

    init : function(){
        this.display = $("#remainingTimeDisplay");
    },

    reset : function(pars){
        this.onFinish = pars.onFinish;
        if(this.interval){
            clearInterval(this.interval);
        }
        this.time = this.initialTime;
        this._displayTime();
        this._set();
    },

    _set : function(){
        this.interval = setInterval(function(){
            counter.time -= counter.stepTime;
            counter._displayTime();
            if(counter.time <= 0){
                clearInterval(counter.interval);
                if($.isFunction(counter.onFinish)){
                   counter.onFinish();
                }
            }
        }, counter.stepTime)
    },

    _displayTime : function(){
        var digit1 = "" + Math.floor(counter.time / 1000);
        var digit2 = "" + Math.floor((counter.time%1000) / 100);
        var digit3 = "" + Math.floor((counter.time%100) / 10);
        this.display.html(digit1 + "." + digit2 + digit3);
    }
}

$(document).ready(function(){
    counter.init();
    programCountDown();
});

jsFiddle Demo

Answer 2

你在找这样的东西吗？

<input type="text" id="search">
<div>seconds till submit: <span id="submitTimeout"></span></div>

$(function() {

    var timeout = 5; // 5 seconds tmeout
    var timeoutHandler = 0;
    var intervalHandler = 0;
    var secondsElapsed = 1;

    $('#search').keyup(function(){
        secondsElapsed = 1;
        clearTimeout(timeoutHandler);
        clearInterval(intervalHandler);

        intervalHandler = setInterval(function() {
            $('#submitTimeout').text(secondsElapsed);
            secondsElapsed ++;            
        }, 1000);

        timeoutHandler = setTimeout(function() {
          clearTimeout(timeoutHandler);
          clearInterval(intervalHandler); 
          $('#submitTimeout').text(secondsElapsed);
          secondsElapsed = 1;
          alert('value is submited to the server');
        }, timeout*1000);



    })

});

jsBin Demo

但它几乎可以满足您的需求。您可以将setInterval功能与setTimeout一起使用。

Answer 3

    var countClock = 0;
$(document).on('input', '#search', function() {
    clearInterval(countClock);
    var sec = 3
    countClock = setInterval(function(){
        sec --;
        $("#displayclock").html("0:0" + sec);
        if (sec===0) {
            clearInterval(countClock);
            sec=3;
            var srch = jQuery("#search").val();
            jQuery.ajax({
                type: "POST",
                url: "handler.php",
                data: ({search: srch}),
                success: function(response){
                    $('#response').html(response);
                }
            });
        }
    },1000);

});

如何以毫秒为单位实现倒计时？

3 个答案: