监听js变量变化
Listen to js variable change
假设在 地方 2
有一个代码
var place2IsReady = true;
在地方1我需要实现下面的逻辑:
Once place2IsReady value was changed (to true) then display alert('ready!');
备注:
- place2IsReady 变量在 place 1.
的范围内不可用
- 来自 place 1 的代码在 place 2 执行之前执行(或者存在竞争条件)。
解决方案 1
我相信我可以改用 window.place2IsReady 并在位置 1 中使用 setTimeout/setInterval 直到我得到 window.place2IsReady === true
.
有更好的选择吗?使用听众?关于变量的变化?
P.S。我只需要跟踪 place2IsReady 的第一个可能的变化。
有没有更好的方法?谢谢。
您可以使用 setTimeout
为变量更改创建侦听器,例如:
let place2IsReady = false;
setReadyListener();
// testing wait 2 seconds to set place2IsReady to true
// so: an alert should occur after 2 seconds
setTimeout(() => place2IsReady = true, 2000);
function setReadyListener() {
const readyListener = () => {
if (place2IsReady) {
return alert("Ready!");
}
return setTimeout(readyListener, 250);
};
readyListener();
}
更通用的侦听器 'factory' 可以是:
let place2IsReady = false;
let fromObj = {
place2IsReady: "busy",
done() { this.place2IsReady = "done"; },
};
const listen = changeListenerFactory();
listen(
() => place2IsReady,
() => console.log("place2IsReady") );
listen(
() => fromObj.place2IsReady === "done",
() => console.log("formObj.place2IsReady done!") );
console.log("Listening...");
// test change variables with listeners
setTimeout(() => place2IsReady = true, 1000);
setTimeout(() => fromObj.done(), 3000);
function changeListenerFactory() {
const readyListener = (condition, callback, delay) => {
if (!condition || typeof condition !== "function") { return true; }
if (condition()) {
return callback();
}
setTimeout(() => readyListener(condition, callback, delay), delay);
};
return (condition, callback = () => {}, delay = 250) =>
readyListener(condition, callback, delay);
}
或者使用 Proxy(带有 设置陷阱 )可能对你有效
const readyState = new Proxy({ ready: false }, {
set (target, prop, val) {
console.log(`readyState.ready changed from ${target[prop]} to ${val}`);
target[prop] = val;
}
});
console.log("Waiting for changes ...");
setTimeout(() => readyState.ready = true, 2000);
假设您可以用对象替换 place2IsReady:
place2IsReady = {
state: false,
set ready(value) {
this.state = value
state && place_1_call()
},
get ready() {
return state
}
}
place_1_call = () => {
alert('ready')
}
place2IsReady.ready = true
假设在 地方 2
有一个代码var place2IsReady = true;
在地方1我需要实现下面的逻辑:
Once place2IsReady value was changed (to true) then display alert('ready!');
备注:
- place2IsReady 变量在 place 1. 的范围内不可用
- 来自 place 1 的代码在 place 2 执行之前执行(或者存在竞争条件)。
解决方案 1
我相信我可以改用 window.place2IsReady 并在位置 1 中使用 setTimeout/setInterval 直到我得到 window.place2IsReady === true
.
有更好的选择吗?使用听众?关于变量的变化?
P.S。我只需要跟踪 place2IsReady 的第一个可能的变化。
有没有更好的方法?谢谢。
您可以使用 setTimeout
为变量更改创建侦听器,例如:
let place2IsReady = false;
setReadyListener();
// testing wait 2 seconds to set place2IsReady to true
// so: an alert should occur after 2 seconds
setTimeout(() => place2IsReady = true, 2000);
function setReadyListener() {
const readyListener = () => {
if (place2IsReady) {
return alert("Ready!");
}
return setTimeout(readyListener, 250);
};
readyListener();
}
更通用的侦听器 'factory' 可以是:
let place2IsReady = false;
let fromObj = {
place2IsReady: "busy",
done() { this.place2IsReady = "done"; },
};
const listen = changeListenerFactory();
listen(
() => place2IsReady,
() => console.log("place2IsReady") );
listen(
() => fromObj.place2IsReady === "done",
() => console.log("formObj.place2IsReady done!") );
console.log("Listening...");
// test change variables with listeners
setTimeout(() => place2IsReady = true, 1000);
setTimeout(() => fromObj.done(), 3000);
function changeListenerFactory() {
const readyListener = (condition, callback, delay) => {
if (!condition || typeof condition !== "function") { return true; }
if (condition()) {
return callback();
}
setTimeout(() => readyListener(condition, callback, delay), delay);
};
return (condition, callback = () => {}, delay = 250) =>
readyListener(condition, callback, delay);
}
或者使用 Proxy(带有 设置陷阱 )可能对你有效
const readyState = new Proxy({ ready: false }, {
set (target, prop, val) {
console.log(`readyState.ready changed from ${target[prop]} to ${val}`);
target[prop] = val;
}
});
console.log("Waiting for changes ...");
setTimeout(() => readyState.ready = true, 2000);
假设您可以用对象替换 place2IsReady:
place2IsReady = {
state: false,
set ready(value) {
this.state = value
state && place_1_call()
},
get ready() {
return state
}
}
place_1_call = () => {
alert('ready')
}
place2IsReady.ready = true