节流函数其主要作用就是防止用户在短时间内多次触发该事件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
思路： 鼠标抬起，间隔0.5秒请求小区数据，通过上下箭头选择小区，输入框文字变化，按下enter或者搜索按钮时，通过输入框中小区名字获取小区uid,如果没有uid,就搜索标题，如果有uid，通过uid获取小区下的房源数据，把数据发送到列表组件。
<script>
function throttle(fn, delay, duration) {
var timer = null,
begin = new Date();
return function() {
var context = this,
args = arguments,
current = new Date();
clearTimeout(timer);
if (current - begin >= duration) {
fn.apply(context, args);
begin = current;
} else {
timer = setTimeout(function() {
fn.apply(context, args);
}, delay)
}
}
};
function demo() {
console.log(1)
}
/*参数说明：第一个参数是要执行的函数，第二个参数是说在500毫秒内连续触发了该函数只执行一次，第三个参数是说每隔200毫秒自动执行一次该函数*/
window.onresize = throttle(demo, 500, 200)
</script>
</body>
</html>
时间： 2024-08-04 19:45:40