setTimeout用法有哪些不为人知的技巧 - 问答

使用setTimeout来模拟setInterval 通常情况下，我们会使用setInterval来实现定时执行某个函数的功能。但是其实我们也可以使用setTimeout来模拟setInterval的效果，只需要在定时执行的函数内再次调用setTimeout即可。

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

setTimeout(intervalFunction, 1000);

使用setTimeout来实现延迟执行除了设置一个固定时间后执行函数外，我们还可以利用setTimeout来实现延迟执行某个任务的效果。例如，在用户输入停止后延迟一段时间再执行某个函数。

let timeout;

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

使用setTimeout来取消执行 setTimeout返回一个标识符，我们可以利用这个标识符来取消执行定时任务。

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

// 取消执行
clearTimeout(timeout);

使用setTimeout来实现动画效果在前端开发中，我们可以利用setTimeout来实现简单的动画效果，通过不断改变元素的属性值并使用setTimeout递归调用来达到动画效果。

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

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

moveElement();

0 赞

0 踩