setTimeout用法有哪些不為人知的技巧

1. 使用setTimeout來模擬setInterval 通常情況下，我們會使用setInterval來實現(xiàn)定時執(zhí)行某個函數(shù)的功能。但是其實我們也可以使用setTimeout來模擬setInterval的效果，只需要在定時執(zhí)行的函數(shù)內(nèi)再次調(diào)用setTimeout即可。

function intervalFunction() {
    console.log("Hello");
    setTimeout(intervalFunction, 1000);
}

setTimeout(intervalFunction, 1000);

2. 使用setTimeout來實現(xiàn)延遲執(zhí)行 除了設置一個固定時間后執(zhí)行函數(shù)外，我們還可以利用setTimeout來實現(xiàn)延遲執(zhí)行某個任務的效果。例如，在用戶輸入停止后延遲一段時間再執(zhí)行某個函數(shù)。

let timeout;

function inputChange() {
    clearTimeout(timeout);
    timeout = setTimeout(function() {
        console.log("Input stopped");
    }, 1000);
}

3. 使用setTimeout來取消執(zhí)行 setTimeout返回一個標識符，我們可以利用這個標識符來取消執(zhí)行定時任務。

let timeout = setTimeout(function() {
    console.log("Hello");
}, 1000);

// 取消執(zhí)行
clearTimeout(timeout);

4. 使用setTimeout來實現(xiàn)動畫效果 在前端開發(fā)中，我們可以利用setTimeout來實現(xiàn)簡單的動畫效果，通過不斷改變元素的屬性值并使用setTimeout遞歸調(diào)用來達到動畫效果。

let element = document.getElementById("element");
let position = 0;

function moveElement() {
    position += 1;
    element.style.left = position + "px";
    
    if (position < 100) {
        setTimeout(moveElement, 10);
    }
}

moveElement();