改变递归函数变量＆＃39; onchange＆＃39;纯粹的js

Question

我有一个这样的页面（正文标记有onload="doInit();"）：

＆＃13;

＆＃13;

function doInit() {
    var end = new Date();
    var tday = new Date();

    var full = 540;
    end.setHours(18, 0, 0);

    function updateTime() {
        var now = new Date(),
    	time = now.getHours() + ':' + now.getMinutes() + ':' + now.getSeconds(),
    	remaining = end - now,

    	_second = 1000,
    	_minute = _second * 60,
    	_hour = _minute * 60,
    	_day = _hour * 24,

    	lwidth = document.getElementById('rng').value,

    	hours = Math.floor((remaining % _day) / _hour);
    	minutes = Math.floor((remaining % _hour) / _minute);
    	seconds = Math.floor((remaining % _minute) / _second);

    	document.getElementById('remain').innerHTML = ' ';
    	document.getElementById('remain').innerHTML += hours + 'h ';
    	document.getElementById('remain').innerHTML += minutes + 'm ';
    	document.getElementById('remain').innerHTML += (seconds + 1) + 's';

    	var current = (full - (hours * 60) - minutes) / full * 100;
        document.getElementById('progress').style.height = lwidth;
    	document.getElementById('progress').innerHTML = current.toFixed(1) + '%';
    	document.getElementById('progress').style.width = current + "%";

    	setTimeout(updateTime, 1000);
    }
    updateTime();
}

doInit();

＆＃13;

body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}

#progress {
    height: 14px;
    background-color: orange;
    font-size: 12px;
    text-align: center;
    margin-top: 5px;
    color: black;
    font-weight: bold;
}

#remain {
    width: 100px;
    height: 14px;
    color: black;
    margin-top: 10px;
    font-size: 12px;
    background-color: cyan;
}

#rng {
    margin-top: 50px;
}

＆＃13;

<div id="progress"> </div>
<div id="remain"></div>
<input id='rng' type="range" name="" min="10" max="20" value="15" step="1">

＆＃13;

＆＃13;

＆＃13;

updateTime()函数更新剩余时间，显示当前进度并检查输入范围值以设置进度条高度。但是我不希望它每秒检查一次输入，因为进度条高度不经常改变，所以没有必要。我希望在更改输入范围值时更改高度，但不要每秒检查一次值。

P.S。我也希望立即改变高度（不要再调用updateTime来调用它）。

Answer 1

  

我希望在更改输入范围值

时更改高度

在递归中不使用或不需要在onchange侦听器中更改的值。因此，您只需使用事件侦听器并处理updateTime函数之外的更改。

我清理了你的代码并添加了监听器：

＆＃13;

＆＃13;

function doInit() {
	var progress = document.getElementById('progress');
	var remain = document.getElementById('remain');
	var range = document.getElementById('rng');
	
    var end = new Date();
    var full = 540;
    var _second = 1000;
    var _minute = _second * 60;
    var _hour = _minute * 60;
    var _day = _hour * 24;
	
    end.setHours(18, 0, 0);

    function updateTime() {
        var now = new Date();
    	var time = now.getHours() + ':' + now.getMinutes() + ':' + now.getSeconds();
    	var remaining = end - now;

    	var hours = Math.floor((remaining % _day) / _hour);
    	var minutes = Math.floor((remaining % _hour) / _minute);
    	var seconds = Math.floor((remaining % _minute) / _second);

    	remain.innerHTML = ' ';
    	remain.innerHTML += hours + 'h ';
    	remain.innerHTML += minutes + 'm ';
    	remain.innerHTML += (seconds + 1) + 's';

    	var current = (full - (hours * 60) - minutes) / full * 100;
    	progress.innerHTML = current.toFixed(1) + '%';
    	progress.style.width = current + "%";

    	setTimeout(updateTime, 1000);
    }

    range.addEventListener('input', function() {
    	var lwidth = range.value;
        progress.style.height = lwidth + "px";
    });

    updateTime();
}

   doInit();

＆＃13;

body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}

#progress {
    height: 14px;
    background-color: orange;
    font-size: 12px;
    text-align: center;
    margin-top: 5px;
    color: black;
    font-weight: bold;
}

#remain {
    width: 100px;
    height: 14px;
    color: black;
    margin-top: 10px;
    font-size: 12px;
    background-color: cyan;
}

#rng {
    margin-top: 50px;
}

＆＃13;

<div id="progress"> </div>
<div id="remain"></div>
<input id='rng' type="range" name="" min="10" max="20" value="15" step="1">

＆＃13;

＆＃13;

＆＃13;