เปลี่ยนช่วงเวลาของ SetInterval ขณะที่กำลังทำงาน


161

ฉันได้เขียนฟังก์ชันจาวาสคริปต์ที่ใช้ setInterval เพื่อจัดการสตริงทุก ๆ สิบวินาทีสำหรับการวนซ้ำจำนวนหนึ่ง

function timer() {
    var section = document.getElementById('txt').value;
    var len = section.length;
    var rands = new Array();

    for (i=0; i<len; i++) {
        rands.push(Math.floor(Math.random()*len));
    };

    var counter = 0
    var interval = setInterval(function() {
        var letters = section.split('');
        for (j=0; j < len; j++) {
            if (counter < rands[j]) {
                letters[j] = Math.floor(Math.random()*9);
            };
        };
        document.getElementById('txt').value = letters.join('');
        counter++

        if (counter > rands.max()) {
            clearInterval(interval);
        }
    }, 100);
};

แทนที่จะกำหนดช่วงเวลาที่หมายเลขเฉพาะฉันต้องการอัปเดตทุกครั้งที่เรียกใช้ตามตัวนับ ดังนั้นแทนที่จะ:

var interval = setInterval(function() { ... }, 100);

มันจะเป็นสิ่งที่ชอบ:

var interval = setInterval(function() { ... }, 10*counter);

น่าเสียดายที่มันใช้ไม่ได้ ดูเหมือนว่า "10 * ตัวนับ" เท่ากับ 0

ดังนั้นฉันจะปรับช่วงเวลาทุกครั้งที่ฟังก์ชันไม่ระบุชื่อทำงานได้อย่างไร

คำตอบ:


107

ใช้setTimeout()แทน การโทรกลับจะรับผิดชอบการยิงหมดเวลาครั้งต่อไป ณ จุดที่คุณสามารถเพิ่มหรือจัดการเวลาได้

แก้ไข

นี่คือฟังก์ชั่นทั่วไปที่คุณสามารถใช้เพื่อใช้การหมดเวลา "decelerating" สำหรับการเรียกใช้ฟังก์ชันใด ๆ

function setDeceleratingTimeout(callback, factor, times)
{
    var internalCallback = function(tick, counter) {
        return function() {
            if (--tick >= 0) {
                window.setTimeout(internalCallback, ++counter * factor);
                callback();
            }
        }
    }(times, 0);

    window.setTimeout(internalCallback, factor);
};

// console.log() requires firebug    
setDeceleratingTimeout(function(){ console.log('hi'); }, 10, 10);
setDeceleratingTimeout(function(){ console.log('bye'); }, 100, 10);

1
โดยการโทรกลับหมายความว่าบรรทัดสุดท้ายของฟังก์ชั่นเรียกตัวเองซ้ำด้วย setTimeout (... , newInterval)?
Marc

1
ฉันคิดว่านั่นคือสิ่งที่เขาหมายถึง ฉันเพิ่งลองมันและดูเหมือนว่าจะทำงาน ขอบคุณเพื่อน!
Joe Di Stefano

2
ให้เพียง 9 hi's :) --tน่าจะเป็นt-- jsfiddle.net/albertjan/by5fd
albertjan

1
การทำแบบนี้วนซ้ำคุณไม่เสี่ยงต่อการเกิดข้อผิดพลาดล้นสแต็กหากtimesใหญ่เกินไป?
André C. Andersen

4
เมื่ออยู่ที่นี่ แต่ฉันต้องบอกว่ารหัสนั้นยากที่จะอ่าน หากคุณจะใช้เครื่องมือจัดฟันบรรทัดถัดไปอย่างน้อยก็มีความเหมาะสมที่จะใช้การเว้นวรรค 4-8 หรือไม่เกิน 2 เยื้อง IMO รุ่นนี้อ่านง่ายกว่ามาก นอกจากนี้ยังรับทราบการเปลี่ยนชื่อของtการtickซึ่งเป็นเดาที่ดีที่สุดของฉันเป็นสิ่งที่ "T" ควรจะยืน tเป็นชื่อตัวแปรที่แย่มาก
Braden ที่ดีที่สุด

124

คุณสามารถใช้ฟังก์ชั่นที่ไม่ระบุชื่อ:

var counter = 10;
var myFunction = function(){
    clearInterval(interval);
    counter *= 10;
    interval = setInterval(myFunction, counter);
}
var interval = setInterval(myFunction, counter);

UPDATE: เป็นข้อเสนอแนะโดย A. วูลฟ์ใช้เพื่อหลีกเลี่ยงความจำเป็นในการsetTimeoutclearInterval

var counter = 10;
var myFunction = function() {
    counter *= 10;
    setTimeout(myFunction, counter);
}
setTimeout(myFunction, counter);

5
RozzA คำตอบของฉันถูกโพสต์เมื่อวันที่ 16 ก.ย. '11 และผู้ใช้ 28958 ในวันที่ 22 ส.ค. 13 ดังนั้นฉันจะขอขอบคุณ "ตัวแทน"!
Nick

12
เหตุใดคุณจึงใช้ช่วงเวลาการหมดเวลาแบบธรรมดาจะดีขึ้นโดยไม่จำเป็นต้องล้างออก เช่น: jsfiddle.net/fgs5nwgn
A. Wolff

4
ฉันติดอยู่กับบริบทของคำถาม setTimeout จะใช้งานได้แน่นอน
Nick

24

ฉันชอบคำถามนี้ - ได้แรงบันดาลใจจากวัตถุจับเวลาเล็กน้อยในตัวฉัน:

window.setVariableInterval = function(callbackFunc, timing) {
  var variableInterval = {
    interval: timing,
    callback: callbackFunc,
    stopped: false,
    runLoop: function() {
      if (variableInterval.stopped) return;
      var result = variableInterval.callback.call(variableInterval);
      if (typeof result == 'number')
      {
        if (result === 0) return;
        variableInterval.interval = result;
      }
      variableInterval.loop();
    },
    stop: function() {
      this.stopped = true;
      window.clearTimeout(this.timeout);
    },
    start: function() {
      this.stopped = false;
      return this.loop();
    },
    loop: function() {
      this.timeout = window.setTimeout(this.runLoop, this.interval);
      return this;
    }
  };

  return variableInterval.start();
};

ตัวอย่างการใช้

var vi = setVariableInterval(function() {
  // this is the variableInterval - so we can change/get the interval here:
  var interval = this.interval;

  // print it for the hell of it
  console.log(interval);

  // we can stop ourselves.
  if (interval>4000) this.stop();

  // we could return a new interval after doing something
  return interval + 100;
}, 100);  

// we can change the interval down here too
setTimeout(function() {
  vi.interval = 3500;
}, 1000);

// or tell it to start back up in a minute
setTimeout(function() {
  vi.interval = 100;
  vi.start();
}, 60000);

4
ขอบคุณ - ให้ฉันออกไปในทิศทางที่ถูกต้องสำหรับสิ่งที่คล้ายกันฉันกำลังทำงานอยู่
พันเอก Sponsz

ง่ายและมีประสิทธิภาพ ขอบคุณ!
ตลก

18

ฉันมีคำถามเช่นเดียวกับโปสเตอร์ต้นฉบับนี่เป็นวิธีแก้ปัญหา ไม่แน่ใจว่ามันมีประสิทธิภาพแค่ไหน ....

interval = 5000; // initial condition
var run = setInterval(request , interval); // start setInterval as "run"

    function request() { 

        console.log(interval); // firebug or chrome log
        clearInterval(run); // stop the setInterval()

         // dynamically change the run interval
        if(interval>200 ){
          interval = interval*.8;
        }else{
          interval = interval*1.2;
        }

        run = setInterval(request, interval); // start the setInterval()

    }

ฉันชอบคำตอบนี้ดีกว่าเพราะจริง ๆ แล้วตอบคำถาม OP (และของฉัน) setTimeout ขึ้นอยู่กับความล่าช้า (โดยการใช้ซีพียู 100%, สคริปต์อื่น ๆ , ฯลฯ ) ที่ setInterval ไม่ได้รับผลกระทบจากความล่าช้าเหล่านั้น - ทำให้เหนือกว่าสำหรับสิ่ง 'เรียลไทม์'
RozzA

8
ฉันแน่ใจว่า 99% ว่าการอ้างสิทธิ์ของคุณเกี่ยวกับsetInterval@RozzA ผิด - มันยังอยู่ภายใต้ความล่าช้าเช่นเดียวกับ JavaScript อื่น ๆ และเกือบทุกเบราว์เซอร์จะยึด setInterval เป็น 4ms คุณมีลิงค์ไปยังโพสต์เกี่ยวกับเรื่องนี้หรือบางอย่าง?
แคระ

9

นี่เป็นวิธีของฉันในการทำเช่นนี้ฉันใช้ setTimeout:

var timer = {
    running: false,
    iv: 5000,
    timeout: false,
    cb : function(){},
    start : function(cb,iv){
        var elm = this;
        clearInterval(this.timeout);
        this.running = true;
        if(cb) this.cb = cb;
        if(iv) this.iv = iv;
        this.timeout = setTimeout(function(){elm.execute(elm)}, this.iv);
    },
    execute : function(e){
        if(!e.running) return false;
        e.cb();
        e.start();
    },
    stop : function(){
        this.running = false;
    },
    set_interval : function(iv){
        clearInterval(this.timeout);
        this.start(false, iv);
    }
};

การใช้งาน:

timer.start(function(){
    console.debug('go');
}, 2000);

timer.set_interval(500);

timer.stop();

+1, ฉันแก้ไขมันเล็กน้อยเพื่อจุดประสงค์ของฉันดังนั้นฉันจึงสามารถใช้ช่วงเวลาหลายตัวแปรได้ - jsfiddle.net/h70mzvdq
Dallas

ปรับเปลี่ยนset_intervalฟังก์ชั่นเพื่อไม่เริ่มการประหารชีวิตใหม่นอกจากช่วงเวลาใหม่จะเล็กกว่าอันเก่า ..if (iv < this.iv) { clearInterval(this.timeout); this.start(false, iv); } else { this.iv = iv; }
Dallas

9

วิธีที่ง่ายกว่าคือการมีifคำสั่งในฟังก์ชั่นที่รีเฟรชและตัวควบคุมเพื่อรันคำสั่งของคุณในช่วงเวลาปกติ ในตัวอย่างต่อไปนี้ฉันเรียกใช้การแจ้งเตือนทุก 2 วินาทีและช่วงเวลา ( intrv) สามารถเปลี่ยนแปลงได้แบบไดนามิก ...

var i=1;
var intrv=2; // << control this variable

var refreshId = setInterval(function() {
  if(!(i%intrv)) {
    alert('run!');
  }
  i++;
}, 1000);

นี่คือรายการโปรดส่วนตัวของฉันด้วย เล็กเรียบง่ายยืดได้
ผู้ชาย mograbi

ฉันต้องการโซลูชันของตัวจับเวลาที่ชะลอความเร็วซึ่งสามารถรีเซ็ตอัตราตามกิจกรรมแอปพลิเคชัน พบนี้ที่ต้องการเพียงและสมบูรณ์แบบ ขอบคุณ.
Andrew Brown

มันเจ๋ง แต่มันก็ยิงช่วงเวลาที่คุณไม่ต้องการมัน ... และมันก็อ่านไม่ออก ด้วยเหตุผลเหล่านี้ฉันต้องการ setTimeout เป็นการส่วนตัว
Kokodoko

4

สิ่งนี้สามารถเริ่มต้นได้ตามที่คุณต้องการ หมดเวลาเป็นวิธีที่ฉันใช้เพื่อให้มันอยู่ด้านบนของชั่วโมง

ฉันต้องการทุกชั่วโมงเพื่อเริ่มการบล็อกรหัสในแต่ละชั่วโมง ดังนั้นสิ่งนี้จะเริ่มเมื่อเซิร์ฟเวอร์เริ่มทำงานและรันช่วงเวลารายชั่วโมง โดยพื้นฐานแล้วการรันครั้งแรกคือการเริ่มต้นช่วงเวลาภายในนาทีเดียวกัน ดังนั้นในวินาทีจาก init ให้เรียกใช้ทันทีจากนั้นทุก ๆ 5 วินาที

var interval = 1000;
var timing =function(){
    var timer = setInterval(function(){
        console.log(interval);
        if(interval == 1000){ /*interval you dont want anymore or increment/decrement */
            interval = 3600000; /* Increment you do want for timer */
            clearInterval(timer);
            timing();
        }
    },interval);
}
timing();

อีกทางเลือกหนึ่งถ้าคุณต้องการที่จะมีอะไรบางอย่างเกิดขึ้นเมื่อเริ่มต้นและจากนั้นตลอดไปในช่วงเวลาที่กำหนดคุณสามารถเรียกมันได้ในเวลาเดียวกับ setInterval ตัวอย่างเช่น:

var this = function(){
 //do
}
setInterval(function(){
  this()
},3600000)
this()

ที่นี่เรามีการดำเนินการนี้เป็นครั้งแรกและจากนั้นทุกชั่วโมง


3

คำตอบง่ายๆคือคุณไม่สามารถปรับปรุงช่วงจับเวลาสร้างไว้แล้ว (มีเพียงสองฟังก์ชั่นเป็นsetInterval/setTimerและclearInterval/clearTimerเพื่อให้มีtimerIdคุณสามารถยกเลิกการใช้งานมัน.) แต่คุณสามารถทำให้การแก้ไขปัญหาบางอย่าง ลองดูที่repo GitHubนี้


2

ฉันไม่สามารถซิงโครไนซ์และเปลี่ยนความเร็วในการตั้งค่าช่วงเวลาของฉันได้และฉันกำลังจะโพสต์คำถาม แต่ฉันคิดว่าฉันได้พบวิธี ควรปรับปรุงให้ดีขึ้นอย่างแน่นอนเพราะฉันเป็นผู้เริ่มต้น ดังนั้นฉันยินดีที่จะอ่านความคิดเห็น / ข้อสังเกตของคุณเกี่ยวกับเรื่องนี้

<body onload="foo()">
<div id="count1">0</div>
<div id="count2">2nd counter is stopped</div>
<button onclick="speed0()">pause</button>
<button onclick="speedx(1)">normal speed</button>
<button onclick="speedx(2)">speed x2</button>
<button onclick="speedx(4)">speed x4</button>
<button onclick="startTimer2()">Start second timer</button>
</body>
<script>
var count1 = 0,
    count2 = 0,
    greenlight = new Boolean(0), //blocks 2nd counter
    speed = 1000,   //1second
    countingSpeed;
function foo(){
    countingSpeed = setInterval(function(){
        counter1();
        counter2();
    },speed);
}
function counter1(){
    count1++;
    document.getElementById("count1").innerHTML=count1;
}
function counter2(){
    if (greenlight != false) {
        count2++;
        document.getElementById("count2").innerHTML=count2;
    }
}
function startTimer2(){
    //while the button hasn't been clicked, greenlight boolean is false
    //thus, the 2nd timer is blocked
    greenlight = true;
    counter2();
    //counter2() is greenlighted
}

//these functions modify the speed of the counters
function speed0(){
    clearInterval(countingSpeed);
}
function speedx(a){
    clearInterval(countingSpeed);
    speed=1000/a;
    foo();
}
</script>

ถ้าคุณต้องการที่เคาน์เตอร์ที่จะเริ่มต้นที่จะเพิ่มขึ้นหนึ่งครั้งหน้าจะโหลดใส่counter1()และcounter2()ในfoo()ก่อนที่จะcountingSpeedถูกเรียกว่า มิฉะนั้นจะใช้เวลาspeedมิลลิวินาทีก่อนดำเนินการ แก้ไข: คำตอบที่สั้นกว่า


2
(function variableInterval() {
    //whatever needs to be done
    interval *= 2; //deal with your interval
    setTimeout(variableInterval, interval);
    //whatever needs to be done
})();

ไม่สามารถสั้นลงได้


1

ฉันเป็นผู้เริ่มต้นใน javascript และไม่พบความช่วยเหลือใด ๆ ในคำตอบก่อนหน้า (แต่เป็นความคิดที่ดี)
โค้ดด้านล่างนี้เร่งความเร็ว (เร่ง> 1) หรือลดลง (เร่ง <1) ฉันหวังว่ามันจะช่วยให้บางคน:

function accelerate(yourfunction, timer, refresh, acceleration) {
    var new_timer = timer / acceleration;
    var refresh_init = refresh;//save this user defined value
    if (refresh < new_timer ){//avoid reseting the interval before it has produced anything.
        refresh = new_timer + 1 ;
    };
    var lastInter = setInterval(yourfunction, new_timer);
    console.log("timer:", new_timer);
    function stopLastInter() {
        clearInterval(lastInter);
        accelerate(yourfunction, new_timer, refresh_init, acceleration);
        console.log("refresh:", refresh);
    };
    setTimeout(stopLastInter, refresh);
}

ด้วย:

  • timer: ค่าเริ่มต้น setInterval ในหน่วย ms (การเพิ่มหรือลด)
  • refresh: เวลาก่อนที่timerจะคำนวณค่าใหม่ของ นี่คือขั้นตอนความยาว
  • factor: ช่องว่างระหว่างค่าเก่ากับtimerค่าถัดไป นี่คือความสูงของขั้นตอน

1

สร้างฟังก์ชั่นใหม่:

// set Time interval
$("3000,18000").Multitimeout();

jQuery.fn.extend({
    Multitimeout: function () {
        var res = this.selector.split(",");
        $.each(res, function (index, val) { setTimeout(function () { 
            //...Call function
            temp();
        }, val); });
        return true;
    }
});

function temp()
{
    alert();
}

1

นี่เป็นอีกวิธีในการสร้างตัวจับเวลาช่วงเวลาที่ชะลอตัว / เร่งความเร็ว ช่วงเวลาที่ได้รับการคูณด้วยปัจจัยจนกระทั่งเกินเวลารวม

function setChangingInterval(callback, startInterval, factor, totalTime) {
    let remainingTime = totalTime;
    let interval = startInterval;

    const internalTimer = () => {
        remainingTime -= interval ;
        interval *= factor;
        if (remainingTime >= 0) {
            setTimeout(internalTimer, interval);
            callback();
        }
    };
    internalTimer();
}


0

แรงบันดาลใจจากการโทรกลับภายในด้านบนฉันทำฟังก์ชั่นในการโทรกลับในเวลาไม่กี่นาที หากการหมดเวลาถูกตั้งค่าเป็นช่วงเวลาเช่น 6,000, 15 000, 30 000, 60 000 มันจะปรับช่วงเวลาอย่างต่อเนื่องเพื่อซิงค์กับช่วงการเปลี่ยนภาพที่แน่นอนในนาทีถัดไปของนาฬิการะบบของคุณ

//Interval timer to trigger on even minute intervals
function setIntervalSynced(callback, intervalMs) {

    //Calculate time to next modulus timer event
    var betterInterval = function () {
        var d = new Date();
        var millis = (d.getMinutes() * 60 + d.getSeconds()) * 1000 + d.getMilliseconds();
        return intervalMs - millis % intervalMs;
    };

    //Internal callback
    var internalCallback = function () {
        return function () {
            setTimeout(internalCallback, betterInterval());
            callback();
        }
    }();

    //Initial call to start internal callback
    setTimeout(internalCallback, betterInterval());
};
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.