我们在Vue中有一个组件,它是一个框架,缩放到窗口大小,其中包含(在一个<slot>)元素(通常<img>或<canvas>),它可以缩放以适应框架,并启用该元素的平移和缩放.
当元素发生变化时,组件需要做出反应.我们可以看到这样做的唯一方法是父进程在发生这种情况时刺激组件,但是如果组件可以自动检测<slot>元素何时发生变化并做出相应反应,则会更好.有没有办法做到这一点?
推迟执行函数(例如在自定义事件处理中)是JavaScript中的常见模式(例如,请参见此处).曾经是使用setTimeout(myFunc,0)是唯一的方法,但是有了承诺,现在有另一种选择:Promise.resolve().then(myFunc).
我曾经假设这些几乎可以做同样的事情,但是在处理包含自定义事件的库时,我想我会发现是否存在差异,所以我将以下块放入节点:
var logfn=function(v){return function(){console.log(v)}};
setTimeout(logfn(1),0);
Promise.resolve().then(logfn(2));
logfn(3)();
Run Code Online (Sandbox Code Playgroud)
我期待在控制台上看到3,1,2但是我看到了3,2,1.所以换句话说,Promise并不等同于使用setTimeout并且首先从块中出来.至少在Node中.
我在Chrome和Firefox中重复测试结果相同,但是在Edge中它出现了3,1,2.我还希望非原生的promise库在引擎盖下使用setTimeout,这样就会像Edge一样.
是什么决定了这些来电被解决的顺序?这些不同的环境使用什么模型来确定执行顺序?上述任何一种是否代表标准或非标准行为?
PS我坚决不建议依赖任何这种保持一致,我只是好奇.
在下面给出的答案指出了正确的方向,并且如下面的评论中简要提到的那样,我在Jake Archibald的一篇优秀文章中找到了完整的答案(示例几乎与我上面的代码完全相同),尽管我是加在这里而不是将其隐藏在评论中.
我正在尝试从网络摄像头获取输入(通过 getUserMedia)并在 WebAssembly 函数中对其进行处理。过程是这样的:
我有两个 HTML 元素, avideo和 a canvas。
// get references to the elements
const vid = document.getElementById('vid');
const canv = document.getElementById('canv');
// load the video from a connected webcam
const stream = await navigator.mediaDevices.getUserMedia({video:true, audio:false});
vid.source.srcObject = stream;
// configure the canvas to have the same dimensions
const settings = stream.getVideoTracks()[0].getSettings();
canv.width = settings.width;
canv.height = settings.height;
Run Code Online (Sandbox Code Playgroud)
我还有一个由一些简单的 C 代码构建的(占位符)WebAssembly 函数:
int SumPixels( unsigned char *data, size_t size ) {
int r=0;
for (size_t …Run Code Online (Sandbox Code Playgroud) javascript ×3
canvas ×1
es6-promise ×1
events ×1
html ×1
node.js ×1
settimeout ×1
video ×1
vue.js ×1
webassembly ×1
webgl ×1