JavaScript 函数循环、延时、节流、防抖

函数循环(setInterval)

间隔指定的毫秒数不停地执行指定的代码

<button onclick="myStartFunction()">开始</button>
<button onclick="myStopFunction()">停止</button><script>
var myVar =  null; //全局function myTimer(){var d=new Date();var t=d.toLocaleTimeString();document.getElementById("demo").innerHTML=t;
}function  myStart() {setInterval(function(){myTimer()},1000); // 开始执行
}function myStopFunction(){clearInterval(myVar); // 停止执行
}
</script>

函数延时(setTimeout)

在指定的毫秒数后执行指定代码

var myVar = null; //全局function myFunction()
{myVar=setTimeout(function(){alert("Hello")},3000);
}function myStopFunction()
{clearTimeout(myVar); //停止执行
}

函数节流(throttle)

规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。

<button onclick="myFunction()">点击</button>
<script>
// 节流函数 
function throttle(fun, delay) {let last, deferTimerreturn function (args) {let that = thislet _args = argumentslet now = +new Date()if (last && now < last + delay) {clearTimeout(deferTimer)deferTimer = setTimeout(function () {last = nowfun.apply(that, _args)}, delay)}else {last = nowfun.apply(that,_args)}}
}function myFunction() {throttle(() => {...}, 1000)
}
</script>

高程中的经典代码：
function throttle(method, context) {clearTimeout(method.tId);method.tId = setTimeout(function () {method.call(context);}, 100)}

应用场景:
1）鼠标不断点击触发，mousedown(单位时间内只触发一次)
2）监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断
3）视频播放节点上报

函数防抖(debounce)

在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。

function debounce(fun, delay) {return function (args) {let that = thislet _args = argsclearTimeout(fun.id)fun.id = setTimeout(function () {fun.call(that, _args)}, delay)}
}debounce(ajax, 500)

应用场景: