我在Javascript中有一个递归类型函数,运行方式如下:
function loadThumb(thumb) {
rotate=setTimeout(function() {
loadThumb(next);
}, delay);
}
Run Code Online (Sandbox Code Playgroud)
注意:我已经简化了功能,使其更易于阅读.
我有一个像这样的"a"标签
<a href="#" onclick="loadThumb(3); clearTimeout(rotate);">Load thumb 3</a>
Run Code Online (Sandbox Code Playgroud)
但是,他们没有清除计时器,计时器继续循环通过该功能而不管clearTimeout()被调用.
有什么想法吗?我认为它可能与范围问题或类似问题有关.
刚在我们的应用程序中找到了这段代码片段.我想知道第一行是否是多余的 - 如果它被立即覆盖,是否需要在变量上调用clearTimeout?还是有一些我应该注意的情况?
function Countdown() {
clearTimeout(sessionTimeoutHandle);
sessionTimeoutHandle = setTimeout(function () { countdownHandler() }, MILLISECONDS);
}
Run Code Online (Sandbox Code Playgroud)
我的预感是"是的,你需要调用clearTimeout"因为我无法想象为什么只有将timeout变量设置为null才能存在clearTimeout方法.
我想更好的问题是:
var timeoutHandler = setTimeout(countdownHandler, MILLISECONDS);
timeoutHandler = setTimeout(countdownHandler, MILLISECONDS);
Run Code Online (Sandbox Code Playgroud)
我现在有两个功能等待大约MILLISECONDS,或只有一个吗?
这个setTimeout在Firefox中完美运行,但在Chrome中,函数timeoutTrigger中没有任何内容发生,包括警报.有任何想法吗?
var $this = $('.active-more');
function timeoutTrigger() {
$this.closest(".container").nextAll(".container:first").find(".description:first").removeClass('hide');
$this.closest(".container").nextAll(".container:first").find(".back:first").find("img.portfolio").remove();
alert("is this thing on?");
}
setTimeout(function(){timeoutTrigger()},400)
Run Code Online (Sandbox Code Playgroud) 这有什么区别:
function blankWord(){
console.log('blank!');
setTimeout(blankWord, 5000);
}
blankWord();
Run Code Online (Sandbox Code Playgroud)
每隔5秒就调用一次该函数,这个:
function blankWord(t){
console.log('blank!');
setTimeout(blankWord, t);
}
blankWord(5000);
Run Code Online (Sandbox Code Playgroud)
哪个函数反复疯狂地快速调用?
无论如何都要延迟函数的返回,使用setTimeout().
function foo(){
window.setTimeout(function(){
//do something
}, 500);
//return "some thing but wait till SetTimeout() finished";
}
Run Code Online (Sandbox Code Playgroud) 这是一个快速(破产)的jsfiddle:http://jsfiddle.net/wH2qF/
由于某些原因,这不起作用......是因为我在另一个setTimeout中有一个setTimeout吗?
$(function() {
$("#Volume").click(function() {
setTimeout(triggerVolumeChange, 4000);
function triggerVolumeChange()
{
var volumeDiv = document.getElementById("volumeNumber");
var volumeOld = 8;
var volumeNew = 37;
var timeNew = (1000/(volumeNew-volumeOld));
changeVolume();
function changeVolume()
{
volumeDiv.innerHTML = volumeOld;
volumeOld++;
if (volumeOld <= volumeNew) setTimeout(changeVolume, timeNew);
};
});
});
Run Code Online (Sandbox Code Playgroud)
应该指出,为了清楚起见,我从Click函数中删除了其他东西,并且澄清了什么不能正常工作,好吧,基本上,我点击并没有任何反应,而如果我删除这一块代码它工作正常..实际上变量的设置也工作正常(我自然是假设)但是当我粘贴或取消注释changeVolume()函数时,点击停止再次工作......有什么想法吗?
-
另一个澄清:我想要做的是,在点击时,在一个字符串中模拟从值8到37的音量.因此该函数内的setTimeout.
-
根据你的家伙的要求,这里是完整的代码...我怀疑它是否有意义,但这里是......仅供参考,点击这将触发一些动画来模拟我正在设计的应用程序的流程. .
<script>
$(function() {
$("#Volume").click(function() {
var userPrompt = document.getElementById("userPrompt")
userPrompt.innerHTML = "Change volume to 37";
var avatarIcon = document.getElementById("avatarIcon");
avatarIcon.innerHTML = "<img src='imgs/haloIcons-volume_82x76.png' alt='Volume'/>";
var hints = …Run Code Online (Sandbox Code Playgroud) 我有以下代码,它演示了直接从事件触发器调用长时间运行的函数与使用的区别setTimeout().
预期行为:
当按下第一个按钮时,它会显示为按下,计算运行几秒钟,然后当计算完成时,按钮再次按下,第二列从"尚未计算"变为"计算完成".(我不会详细说明为什么会发生这种情况; 它在相关答案中进行了解释.)
按下第二个按钮时,按钮立即按下; 第二列立即更改为"正在计算..."文本.当计算在几秒钟后完成时,第二列从"计算..."变为"完成计算".
实际发生了什么:
这在Chrome中完美运行(两个按钮都按预期运行)
这在Internet Explorer 8中完美运行
这在Firefox(第25版)中不起作用.具体来说,第二个按钮作为第一个按钮表现为100%.
在更改超时setTimeout()从0到1无影响
在更改超时setTimeout()从0以500 作品
这让我有一个很大的难题.
根据为什么setTimeout()有效的原因,而缺少一个没有的原因,延迟对事物的运作方式应该没有影响,因为这里setTimeout()的主要目的是改变排队顺序,而不是拖延事情.
那么,为什么它不能在Firefox上使用延迟0或1,但按预期工作延迟500(并且适用于Internet Explorer 8/Chrome上的任何延迟)?
更新:除了下面的源代码,我还做了一个JSFiddle.但由于某些原因,JSFiddle甚至拒绝加载我的Internet Explorer 8,因此对于该测试,需要以下代码.
更新2:有人提出了dom.min_timeout_valueFirefox中配置设置问题的可能性.我已将其编辑为4到0,重新启动浏览器,并且没有修复任何内容.它仍然失败,超时为0或1,成功为500.
这是我的源代码 - 我只是将其保存到C:驱动器上的HTML文件中,并在所有三个浏览器中打开:
<html><body>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<table border=1>
<tr><td><button id='do'>Do long calc - bad status!</button></td>
<td><div id='status'>Not Calculating yet.</div></td></tr>
<tr><td><button id='do_ok'>Do long calc - good status!</button></td>
<td><div id='status_ok'>Not Calculating yet.</div></td></tr> …Run Code Online (Sandbox Code Playgroud) 我已经setTimeout多次使用函数作为参考,例如
setTimeout(someFunction, 3000);
Run Code Online (Sandbox Code Playgroud)
在某些情况下,为了保留值,this我必须事先将它分配给变量,但不明白为什么以下不起作用:
var logger = {
log: function() {
var that = this;
console.log(that.msg);
setTimeout(that.log, 3000);
},
msg: "test"
};
logger.log();
Run Code Online (Sandbox Code Playgroud)
但是,使用匿名函数可以正常工作:
var logger = {
log: function() {
var that = this;
console.log(that.msg);
setTimeout(function() { that.log() }, 3000);
},
msg: "test"
};
Run Code Online (Sandbox Code Playgroud) 我想在第一次触发时运行一个延迟的间隔。我该如何使用 useEffect 来做到这一点?由于语法,我发现很难实现我想做的事情
区间函数
useEffect(()=>{
const timer = setInterval(() => {
//do something here
return ()=> clearInterval(timer)
}, 1000);
},[/*dependency*/])
Run Code Online (Sandbox Code Playgroud)
延迟功能
useEffect(() => {
setTimeout(() => {
//I want to run the interval here, but it will only run once
//because of no dependencies. If i populate the dependencies,
//setTimeout will run more than once.
}, Math.random() * 1000);
}, []);
Run Code Online (Sandbox Code Playgroud)
当然,它是可以以某种方式实现的......
情况 1:在函数组件外部使用 let 变量
https://codepen.io/evan-jin/pen/VwWOPJV?editors=0010
案例2:在父函数组件中使用React.useRef
https://codepen.io/evan-jin/pen/VwWOpvg?editors=0010
情况1
let cursorTimer = null // << this is the point for 1 case
const Item = ({ num }) => {
const [hoverItem, setHoverItem] = useState(null)
const addCursor = useCallback(() => {
clearTimeout(cursorTimer)
cursorTimer = null
cursorTimer = setTimeout(() => {
document.body.style.cursor = 'wait'
}, 10)
}, [])
const removeCursor = useCallback(() => {
if (cursorTimer === null) return
cursorTimer = setTimeout(() => {
document.body.style.cursor = 'grab'
}, 500)
}, [])
useEffect(() …Run Code Online (Sandbox Code Playgroud) settimeout ×10
javascript ×9
react-hooks ×2
reactjs ×2
delay ×1
firefox ×1
html ×1
parameters ×1
setinterval ×1
use-effect ×1