0
点赞
收藏
分享

微信扫一扫

一文读懂 setTimeout 和 setInterval 的用法

玉字璧 2024-06-12 阅读 9

文章导读:AI 辅助学习前端,包含入门、进阶、高级部分前端系列内容,当前是 JavaScript 的部分,瑶琴会持续更新,适合零基础的朋友,已有前端工作经验的可以不看,也可以当作基础知识回顾。

这篇文章瑶琴带大家学习 Window的属性:setTimeout和setInterval。setTimeout 和 setInterval 是JavaScript中用于定时操作的两个非常重要的函数,它们都属于 window 对象。这两个函数允许你指定在一定时间后执行的代码。

1.setTimeout

 用于在指定的毫秒数后执行一次函数或代码。

语法:

var timeoutID = window.setTimeout(function, delay);

timeoutID 是一个标识定时器的变量,可以用来在需要时清除定时器。

function 是要执行的函数或代码。

delay 是一个数值,表示函数执行前的等待时间(毫秒)。

示例:

// 在2秒后输出 "Hello, World!" 到控制台
window.setTimeout(function() {      
    console.log('Hello, World!');
}, 2000);

2.setInterval

setInterval 用于每隔指定的毫秒数重复执行一个函数或代码。

语法:

var intervalID = window.setInterval(function, delay);

intervalID 是一个标识定时器的变量,可以用来在需要时清除间隔。

function 是要重复执行的函数或代码。

delay 是一个数值,表示两次函数执行之间的时间间隔(毫秒)。

示例:

// 每隔1秒输出当前时间到控制台
var intervalID = window.setInterval(function() {      
    console.log(new Date().toLocaleTimeString());
}, 1000);

清除定时器:

使用 setTimeout 或 setInterval 返回的 timeoutID 或 intervalID,可以清除已经设置的定时器。

clearTimeout(timeoutID) - 清除由 setTimeout 设置的定时器。

clearInterval(intervalID) - 清除由 setInterval 设置的间隔。

示例:

// 假设我们有一个由 setTimeout 设置的定时器
var timeoutID = window.setTimeout(function() {      
    console.log('This will not be printed.');
}, 3000);// 在一定条件下,我们可能想清除这个定时器window.clearTimeout(timeoutID);

注意事项:

setTimeout 和 setInterval 接受的延迟时间最大为 32 毫秒,即使设置更长的时间,超出部分也不会生效。

定时器的执行可能会因为页面的加载、浏览器的渲染等其他因素而延迟。

传递给 setTimeout 和 setInterval 的函数会在全局作用域中执行,而不是在你调用它们的局部作用域中。

箭头函数与定时器:

在ES6中,可以使用箭头函数来简化函数的书写:

示例:

// 使用箭头函数
window.setTimeout(() => console.log('Hello, World!'), 2000);

使用箭头函数时,需要注意 this 的值。在箭头函数中,this 保持在定义它的上下文中的值,而不是在函数执行时的作用域中。

通过理解 setTimeout 和 setInterval 的使用,可以实现各种基于时间的动态效果,如动画、周期性更新数据等。这些函数是前端开发中常用的工具,掌握它们对于创建交互式网页非常重要。

下面瑶琴列举一些平时在开发过程中常用的案例:

1、延迟执行:在某些操作后需要延迟一段时间再执行其他操作,比如用户提交表单后,延迟一段时间再进行页面跳转或提示。

document.getElementById('myForm').addEventListener('submit', 
    function(event) {  
    event.preventDefault();     
    alert('Form submitted!');      
    window.setTimeout(function() {            
        window.location.href = 'success.html'; // 延迟跳转到成功页面 
    }, 1000);
});

2、倒计时:实现倒计时功能,比如在用户执行某个操作后,显示一个倒计时并执行后续操作。

function countdown(seconds, callback) {      
    var intervalID = window.setInterval(function() {        
    console.log('Countdown: ', seconds);        
    if (--seconds < 0) {              
        window.clearInterval(intervalID);                  
        callback();            
    }      
    }, 1000);
}
countdown(5, function() {      
    console.log('Time is up!');
});

3、用户行为后的操作:在用户点击一个按钮后,延迟一段时间才执行某些操作,比如防止用户多次点击按钮。

document.getElementById('myButton').addEventListener('click', function() {   
   console.log('Button clicked');  
    window.setTimeout(function() {    
    // 执行需要延迟的操作  
    }, 3000);
});

4、图片轮播:在图片轮播组件中,可以使用 setTimeout 来控制图片切换的时间间隔。

var currentSlide = 0;var slides = document.querySelectorAll('.slide');
var intervalID = window.setInterval(nextSlide, 3000);
function nextSlide() {      // 隐藏当前幻灯片  
    slides[currentSlide].style.display = 'none';      
    // 显示下一张幻灯片  
    currentSlide = (currentSlide + 1) % slides.length;      slides[currentSlide].style.display = 'block';
}

5、实时更新数据:在需要周期性更新数据的场合,比如股票价格、新闻头条等.

var intervalID = window.setInterval(function() {  
fetch('https://api.example.com/stock-prices')                
.then(function(response) {              
   return  response.json();        
})        
.then(function(data) {              
   updateStockPrices(data);        
});
}, 60000); // 每60秒更新一次

6、定时检测网络连接:定期检查用户的网络连接状态。

window.setInterval(function() {  
    if (navigator.onLine) {        
        console.log('Online');  
    } else { 
         console.log('Offline');  
    }
}, 5000);

7、定时保存草稿:在文本编辑器中,可以定期保存用户的输入作为草稿。

document.getElementById('text-editor').addEventListener('input', function() {      window.setTimeout(function() { 
           saveDraft();      
    }, 5000);
});

通过这些案例,我们可以看到 setTimeout 和 setInterval 在前端开发中的重要性,初学者可以结合上面的示例实践一边。

它们可以用来实现各种基于时间的动态效果和用户交互,极大地增强了网页的功能性和用户体验。

希望今天的内容对初学前端的朋友有所帮助。也希望每一个初学者都能成为一个优秀的前端开发工程师,加油。

最后啰嗦一句,好记性不如烂笔头,希望大家在学习的过程中养成做笔记的习惯,形成自己的知识体系。

举报

相关推荐

0 条评论