<template>
    <div>请查看页面源码</div>
</template>

<script setup lang="ts">
/**
 * 第一题 1. 冒泡排序
 */
function useBubbleSort() {
    const arr = [3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5];
    const bubbleSort = (arr: number[]): number[] => {
        const arrLength = arr.length - 1;

        for (let i = 0; i < arrLength; i++) {
            for (let j = 0; j < arrLength - i; j++) {
                let temp = arr[j + 1];
                if (arr[j] > arr[j + 1]) {
                    arr[j + 1] = arr[j];
                    arr[j] = temp;
                }
            }
        }
        console.log(arr);
        return arr;
    };

    bubbleSort(arr);
}
useBubbleSort();

/**
 * 第二题 1. 防抖函数
 * 防抖函数的作用是，当函数被多次调用时，只有当函数执行结束后，才会执行一次，防止函数被频繁调用。
 * 防抖函数的实现原理是，在函数执行的过程中，设置一个定时器，当函数执行结束后，清除定时器，这样就保证了函数只执行一次。
 * 应用场景一般有：
 * 1. 文本输入框的实时搜索功能，用户输入字符后，函数会在输入结束后才执行，防止函数执行过于频繁。
 * 2. 页面滚动时，函数只在页面停止滚动后才执行，防止函数执行过于频繁。
 * 3. 表单提交时，函数只在用户提交表单后才执行，防止函数执行过于频繁。
 * 4. 窗口大小改变时，函数只在窗口大小改变结束后才执行，防止函数执行过于频繁。
 */
function useDebounce() {
    const debounce = (fn, delay) => {
        let timer = null;
        return function (...args) {
            if (timer) {
                clearTimeout(timer);
            }
            timer = setTimeout(() => {
                fn.apply(this, args);
            }, delay);
        };
    };

    window.addEventListener(
        'resize',
        debounce(() => {
            console.log('窗口大小改变了');
        }, 200)
    );
}

/**
 * 第三题 1. 节流函数
 */
</script>
